@extends('layout.app')


@push('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('taginput/bootstrap-tagsinput.css') }}" crossorigin="anonymous"
        referrerpolicy="no-referrer">
    <style type="text/css">
        .bootstrap-tagsinput {
            width: 100%;
        }

        .label-info {
            background-color: rgb(36, 219, 204);
        }

        .label {
            /* display: inline-block; */
            padding: .25em .4em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: .25rem;
            transition: color .15s ease-in-out, background-color .15s ease-in-out,
                border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }
    </style>
@endpush

@section('content')

    <form action="{{ route('clients-image-update-store', $client->id) }}" method="POST" class="form"
        enctype="multipart/form-data">
        @method('PUT')
        @csrf

        <div class="card">
            <div class="card-body">
                @if (!$client->clientsinfo)
                    <div class="alert alert-warning mb-0">No client info record found for this client.</div>
                @elseif (checkSettings('pictureUpload') == 'enable')
                    @if (($client->pop && $client->pop->bill_generate == 'yes') || checkSettings('file_up_for_own_other') == 'enable')
                        <div class="row" id="file_info">
                            <div class="form-group col-sm-2">
                                <div class="text-center mb-1 image-info"></div>
                                @if (checkSettings('store_image_to_s3') == 'enable')
                                    @php
                                        $s3Url = Storage::disk('s3')->url(
                                            'customer_profile_picture/' .
                                                $client->clientsinfo->customer_profile_picture,
                                        );
                                    @endphp

                                    <img width="auto" height="100" src="{{ $s3Url }}" alt="No Image">
                                @else
                                    <img width="auto" height="100"
                                        src="{{ asset('storage/customer_profile_picture/' . $client->clientsinfo->customer_profile_picture) }}"
                                        alt="No Image">
                                @endif
                                <label for="customer_profile_picture" class="block pt-2">
                                    Profile Picture
                                    {{ checkRequired('customer_profile_picture', '*') }}
                                </label>
                                <input type="file" name="customer_profile_picture" accept="image/*"
                                    class="form-control-file"
                                    @if ($client->clientsinfo->customer_profile_picture == null) {{ checkRequired('customer_profile_picture', 'required') }} @endif>
                            </div>
                            <div class="form-group col-sm-2">
                                <div class="text-center mb-1 image-info"></div>
                                @if (checkSettings('store_image_to_s3') == 'enable')
                                    @php
                                        $s3Url = Storage::disk('s3')->url(
                                            'customer_agrement/' . $client->clientsinfo->customer_agrement,
                                        );
                                    @endphp

                                    <img width="auto" height="100" src="{{ $s3Url }}" alt="No Image">
                                @else
                                    <img width="auto" height="100"
                                        src="{{ asset('storage/customer_agrement/' . $client->clientsinfo->customer_agrement) }}"
                                        alt="No Image">
                                @endif

                                <label for="customer_agrement" class="block pt-2">
                                    Customer Agrement{{ checkRequired('customer_agrement_required', '*') }}
                                </label>
                                <input type="file" name="customer_agrement" accept="image/*" class="form-control-file"
                                    @if ($client->clientsinfo->customer_agrement == null) {{ checkRequired('customer_agrement_required', 'required') }} @endif>
                            </div>
                            <div class="form-group col-sm-2">
                                <div class="text-center mb-1 image-info"></div>
                                @if (checkSettings('store_image_to_s3') == 'enable')
                                    @php
                                        $s3Url = Storage::disk('s3')->url(
                                            'profilePicture/' . $client->clientsinfo->profilePicture,
                                        );
                                    @endphp

                                    <img width="auto" height="100" src="{{ $s3Url }}" alt="No Image">
                                @else
                                    <img width="auto" height="100"
                                        src="{{ asset('storage/profilePicture/' . $client->clientsinfo->profilePicture) }}"
                                        alt="No Image">
                                @endif
                                <label for="profilePicture" class="block pt-2">
                                    Picture
                                </label>
                                <input type="file" name="profilePicture" accept="image/*" class="form-control-file">
                            </div>

                            <div class="form-group col-sm-2">
                                <div class="text-center mb-1 image-info"></div>
                                @if (checkSettings('store_image_to_s3') == 'enable')
                                    @php
                                        $s3Url = Storage::disk('s3')->url('picture/' . $client->clientsinfo->picture);
                                    @endphp

                                    <img width="auto" height="100" src="{{ $s3Url }}" alt="No Image">
                                @else
                                    <img width="auto" height="100"
                                        src="{{ asset('storage/picture/' . $client->clientsinfo->picture) }}"
                                        alt="No Image">
                                @endif
                                <label for="picture" class="block pt-2">
                                    Building Photo{{ checkRequired('building_photo_required', '*') }}
                                </label>
                                <input type="file" name="picture" accept="image/*" class="form-control-file"
                                    @if ($client->clientsinfo->picture == null) {{ checkRequired('building_photo_required', 'required') }} @endif>
                            </div>

                            <div class="form-group col-sm-2">
                                <div class="text-center mb-1 image-info"></div>
                                @if (checkSettings('store_image_to_s3') == 'enable')
                                    @php
                                        $s3Url = Storage::disk('s3')->url(
                                            'client_door/' . $client->clientsinfo->client_door,
                                        );
                                    @endphp

                                    <img width="auto" height="100" src="{{ $s3Url }}" alt="No Image">
                                @else
                                    <img width="auto" height="100"
                                        src="{{ asset('storage/client_door/' . $client->clientsinfo->client_door) }}"
                                        alt="No Image">
                                @endif
                                <label for="client_door" class="block pt-2">
                                    Client Flat Door Picture{{ checkRequired('dore_picture_required', '*') }}
                                </label>
                                <input type="file" name="client_door" accept="image/*" class="form-control-file"
                                    @if ($client->clientsinfo->client_door == null) {{ checkRequired('dore_picture_required', 'required') }} @endif>
                            </div>

                            <div class="form-group col-sm-2">
                                <div class="text-center mb-1 image-info"></div>
                                @if (checkSettings('store_image_to_s3') == 'enable')
                                    @php
                                        $s3Url = Storage::disk('s3')->url(
                                            'onu_router_info/' . $client->clientsinfo->onu_router_info,
                                        );
                                    @endphp

                                    <img width="auto" height="100" src="{{ $s3Url }}" alt="No Image">
                                @else
                                    <img width="auto" height="100"
                                        src="{{ asset('storage/onu_router_info/' . $client->clientsinfo->onu_router_info) }}"
                                        alt="No Image">
                                @endif
                                <label for="onu_router_info" class="block pt-2">
                                    Onu and Router Info{{ checkRequired('onu_router_info', '*') }}
                                </label>
                                <input type="file" name="onu_router_info" accept="image/*" class="form-control-file"
                                    @if ($client->clientsinfo->onu_router_info == null) {{ checkRequired('onu_router_info', 'required') }} @endif>
                            </div>
                        </div>

                        @if (checkSettings('national_id_picture') == 'enable')
                            <div class="row mt-2">
                            <div class="form-group col-sm-3">
                                <label for="nid_image">National ID Image
                                    {{ checkRequired('national_id_picture', '*') }}</label>
                                @if (checkSettings('store_image_to_s3') == 'enable')
                                    @php
                                        $s3Url = Storage::disk('s3')->url(
                                            'nationalId/' . $client->clientsinfo->nid_image,
                                        );
                                    @endphp
                                    <img width="auto" height="100" src="{{ $s3Url }}" alt="No Image">
                                @else
                                    <img width="auto" height="100"
                                        src="{{ asset('storage/nationalId/' . $client->clientsinfo->nid_image) }}"
                                        alt="No Image">
                                @endif
                                <input type="file" name="nid_image" accept="image/*" class="form-control-file"
                                    @if ($client->clientsinfo->nid_image == null) {{ checkRequired('national_id_picture', 'required') }} @endif>
                                @error('nid_image')
                                    <div class="alert alert-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            </div>
                        @endif

                        <div class="mt-3">
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                    @endif
                @endif

            </div>
        </div>
    </form>

    <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <img id="modalImage" src="" alt="Full size image"
                        style="max-width: 100%; height: auto;">
                </div>
            </div>
        </div>
    </div>


@endsection

@push('js')
    <script src="{{ asset('taginput/bootstrap-tagsinput.js') }}"></script>
@endpush

@section('ajax')
    <script type="text/javascript">
        // Add image click handler
        $(document).ready(function() {
            // Add click handler to all images in the file_info div
            $('#file_info img').each(function() {
                var img = $(this);
                var infoDiv = img.closest('.form-group').find('.image-info');
                var imgSrc = img.attr('src');

                // Get file extension from src
                var extension = imgSrc.split('.').pop().toLowerCase();

                // Fetch the image file size and dimensions
                fetch(imgSrc)
                    .then(response => {
                        // Get file size from response headers
                        const size = response.headers.get('content-length');
                        let sizeText = '';
                        if (size) {
                            // Convert to MB if larger than 1MB, otherwise show in KB
                            if (size > 1024 * 1024) {
                                sizeText = (size / (1024 * 1024)).toFixed(2) + ' MB';
                            } else {
                                sizeText = (size / 1024).toFixed(2) + ' KB';
                            }
                        }

                        // Create a new image object to get the dimensions
                        var tempImg = new Image();
                        tempImg.onload = function() {
                            var width = this.width;
                            var height = this.height;
                            // Combine size, dimensions and file type
                            var fullText = sizeText + ' (' + width + ' x ' + height + ' px) - ' +
                                extension.toUpperCase();
                            infoDiv.text(fullText);
                        }
                        tempImg.src = imgSrc;
                    })
                    .catch(error => {
                        console.error('Error fetching image:', error);
                    });

                // Add click handler for modal
                img.css('cursor', 'pointer').click(function() {
                    var imgSrc = $(this).attr('src');
                    $('#modalImage').attr('src', imgSrc);
                    $('#imageModal').modal('show');
                });
            });

            // Add click handler for NID image (outside file_info div)
            $('input[name="nid_image"]').closest('.form-group').find('img').each(function() {
                var img = $(this);
                var imgSrc = img.attr('src');

                // Add click handler for modal
                img.css('cursor', 'pointer').click(function() {
                    var imgSrc = $(this).attr('src');
                    $('#modalImage').attr('src', imgSrc);
                    $('#imageModal').modal('show');
                });
            });

        });
    </script>
@endsection