@extends('layouts.app')

@section('title', 'Profile')

@section('page-wrapper')
    <div class="page-header d-print-none">
        <div class="container-fluid">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <h2 class="page-title">
                        Profile
                    </h2>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-fluid">
            <div class="card">
                <div class="row">
                    @include('profile.general-setting-items')
                    <div class="col-12 col-md-9 d-flex flex-column ps-0">
                        <form method="post" class="border-start" action="{{ route('profile.update') }}"
                            enctype="multipart/form-data">
                            @csrf
                            @method('patch')
                            <div class="card-body">
                                <h2 class="mb-4">Profile Details</h2>
                                @if (session('status') === 'profile-updated')
                                    <script>
                                        // Ensure this code runs after the page is loaded
                                        document.addEventListener('DOMContentLoaded', function() {
                                            showSuccessMessage("Profile updated successfully!");
                                        });
                                    </script>
                                @endif
                                <div class="row g-3">
                                    <div class="col-md mb-1">
                                        <label for="profile_pic" class="form-label required">Name</label>
                                        <input id="name" placeholder="Enter name" name="name" type="text"
                                            class="form-control @error('name') is-invalid @enderror"
                                            value="{{ old('name', $user->name) }}" autofocus
                                            @if (Auth::user()->role_id == 2) readonly @endif>
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md">
                                        <label for="email" class="form-label required">Email</label>
                                        <input type="email" class="form-control" value="{{ $user->email }}" readonly>
                                    </div>
                                    <div class="col-12 {{ Auth::user()->role_id == 3 ? 'mb-3' : '' }}" id="profile_pic">
                                        <label for="profile_pic" class="form-label">Profile Image</label>
                                        <input type="file"
                                            class="form-control @error('profile_pic') is-invalid @enderror" id="profile_pic"
                                            name="profile_pic" accept="image/*">
                                        <small class="form-hint">Preferred size: 250px x 250px (JPG, JPEG, PNG
                                            allowed).</small>
                                        @error('profile_pic')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <div class="">
                                            <img id="logoPreview" src="#" alt="Profile Image Preview"
                                                style="display: none; max-width: 150px; max-height: 150px; border: 1px solid #ddd; padding: 5px; border-radius: 4px;">
                                        </div>
                                        @if ($user->profile_pic)
                                            <div id="existing-photos"
                                                class="d-flex flex-wrap gap-3 justify-content-start {{ $user->profile_pic ? 'mt-3' : '' }}">
                                                <div class="d-flex flex-column items-center">
                                                    <img src="{{ asset('storage/' . $user->profile_pic) }}" alt="Photo"
                                                        style="max-width: 150px; max-height: 150px; border: 1px solid #ddd; padding: 5px; border-radius: 4px;">
                                                    <button type="button" class="btn btn-sm btn-danger mt-1 remove-photo"
                                                        data-photo-id="{{ $user->id }}">Remove</button>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                @if (Auth::user()->role_id == 3)
                                    <div class="row g-3">
                                        <div class="col-md mb-1">
                                            <label class="form-label required">Contact Person Name</label>
                                            <input id="contact_person_name" name="contact_person_name" type="text"
                                                class="form-control @error('contact_person_name') is-invalid @enderror"
                                                value="{{ old('contact_person_name', $franchise->contact_person_name) }}"
                                                autofocus>
                                            @error('contact_person_name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md mb-3">
                                            <label class="form-label required">Contact Person Mobile</label>
                                            <input id="contact_person_mobile" name="contact_person_mobile" type="text"
                                                class="form-control @error('contact_person_mobile') is-invalid @enderror"
                                                value="{{ old('contact_person_mobile', $franchise->contact_person_mobile) }}"
                                                minlength="10" maxlength="10" pattern="[0-9]{10}"
                                                oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10)">
                                            @error('contact_person_mobile')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="row g-3">
                                        <div class="col-md mb-1">
                                            <label class="form-label required">GST number</label>
                                            <input id="gst_number" name="gst_number" type="text"
                                                class="form-control @error('gst_number') is-invalid @enderror"
                                                value="{{ old('gst_number', $franchise->gst_number) }}">
                                            @error('gst_number')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md mb-3">
                                            <label for="address" class="form-label required">Address</label>
                                            <input type="text"
                                                class="form-control @error('address') is-invalid @enderror" id="address"
                                                name="address" value="{{ old('address', $franchise->address) }}">
                                            @error('address')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="row ">
                                        <div class="col-md mb-4">
                                            <label for="pincode" class="form-label required">Pincode</label>
                                            <input type="text"
                                                class="form-control @error('pincode') is-invalid @enderror" id="pincode"
                                                name="pincode" value="{{ old('pincode', $franchise->pincode) }}"
                                                minlength="6" maxlength="6" pattern="[0-9]{6}"
                                                placeholder="Enter pincode"
                                                oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6)">
                                            @error('pincode')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="mb-3 col-4">
                                            <label for="city_id" class="form-label required">City</label>
                                            <input type="hidden" name="city_id" id="city_id"
                                                value="{{ old('city_id', $franchise->city_id) }}">
                                            <input type="text"
                                                class="form-control @error('city_id') is-invalid @enderror" id="city"
                                                name="city" placeholder="Enter city" value="{{ old('city') }}"
                                                readonly>
                                            @error('city_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="mb-3 col-4">
                                            <label for="state_id" class="form-label required">State</label>
                                            <input type="hidden" name="state_id" id="state_id"
                                                value="{{ old('state_id', $franchise->state_id) }}">
                                            <input type="text"
                                                class="form-control @error('state_id') is-invalid @enderror"
                                                id="state" name="state" placeholder="Enter state"
                                                value="{{ old('state') }}" readonly>
                                            @error('state_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="row g-3">
                                        <div class="col-md mb-1">
                                            <label for="aadharcard" class="form-label">Aadhaar Number</label>
                                            <input type="number" placeholder="Enter aadhaar number"
                                                class="form-control @error('aadharcard') is-invalid @enderror"
                                                id="aadharcard" name="aadharcard"
                                                value="{{ old('aadharcard', $franchise->aadharcard) }}" minlength="12"
                                                maxlength="12" pattern="[0-9]{10}"
                                                oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 12)">
                                            @error('aadharcard')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md mb-3">
                                            <label for="aadharcard_image" class="form-label">Aadharcard Image</label>
                                            <input type="file"
                                                class="form-control @error('aadharcard_image') is-invalid @enderror"
                                                id="aadharcard_image" name="aadharcard_image" accept="image/*">
                                            <small class="form-hint">Preferred size: 250px x 250px (JPG, JPEG, PNG
                                                allowed).</small>
                                            @if ($franchise->aadharcard_image)
                                                <div id="existing-photos"
                                                    class="mb-3 d-flex flex-wrap gap-3 justify-content-start {{ $franchise->aadharcard_image ? 'mt-3' : '' }}">
                                                    <div class="d-flex flex-column items-center">
                                                        <img src="{{ asset('storage/' . $franchise->aadharcard_image) }}"
                                                            alt="Photo"
                                                            style="max-width: 150px; max-height: 150px; border: 1px solid #ddd; padding: 5px; border-radius: 4px;">
                                                        <button type="button"
                                                            class="btn btn-sm btn-danger mt-1 remove-aadhaar"
                                                            data-photo-id="{{ $franchise->id }}">Remove</button>
                                                    </div>
                                                </div>
                                            @endif
                                            <div class="">
                                                <img id="aadharcardPreview" src="#" alt="Aadharcard Image Preview"
                                                    style="display: none; max-width: 150px; max-height: 150px; border: 1px solid #ddd; padding: 5px; border-radius: 4px;">
                                            </div>
                                            @error('aadharcard_image')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="row g-3">
                                        <div class="col-md mb-3">
                                            <label for="pancard" class="form-label">PAN Number</label>
                                            <input type="text" placeholder="Enter pan number"
                                                class="form-control @error('pancard') is-invalid @enderror"
                                                id="pancard" name="pancard"
                                                value="{{ old('pancard', $franchise->pancard) }}" minlength="10"
                                                maxlength="10">
                                            @error('pancard')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md mb-3">
                                            <label for="pancard_image" class="form-label">Pancard Image</label>
                                            <input type="file"
                                                class="form-control @error('pancard_image') is-invalid @enderror"
                                                id="pancard_image" name="pancard_image" accept="image/*">
                                            <small class="form-hint">Preferred size: 250px x 250px (JPG, JPEG, PNG
                                                allowed).</small>
                                            @if ($franchise->pancard_image)
                                                <div id="existing-photos"
                                                    class="mb-3 d-flex flex-wrap gap-3 justify-content-start {{ $franchise->pancard_image ? 'mt-3' : '' }}">
                                                    <div class="d-flex flex-column items-center">
                                                        <img src="{{ asset('storage/' . $franchise->pancard_image) }}"
                                                            alt="Photo"
                                                            style="max-width: 150px; max-height: 150px; border: 1px solid #ddd; padding: 5px; border-radius: 4px;">
                                                        <button type="button"
                                                            class="btn btn-sm btn-danger mt-1 remove-pancard"
                                                            data-photo-id="{{ $franchise->id }}">Remove</button>
                                                    </div>
                                                </div>
                                            @endif
                                            <div class="">
                                                <img id="pancardPreview" src="#" alt="Pancard Image Preview"
                                                    style="display: none; max-width: 150px; max-height: 150px; border: 1px solid #ddd; padding: 5px; border-radius: 4px;">
                                            </div>
                                            @error('pancard_image')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                @endif
                            </div>
                            {{-- @if (Auth::user()->role_id != 2) --}}
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary me-3">Save</button>
                                <a href="{{ url()->previous() }}" class="btn">Cancel</a>
                            </div>
                            {{-- @endif --}}
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            // Handle aadharcard_image preview
            $('#aadharcard_image').change(function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#aadharcardPreview').attr('src', e.target.result).show();
                        $('#aadharcardPreview').parent().addClass('mt-3');
                    }
                    reader.readAsDataURL(file);
                }
            });

            // Handle pancard_image preview
            $('#pancard_image').change(function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#pancardPreview').attr('src', e.target.result).show();
                        $('#pancardPreview').parent().addClass('mt-3');
                    }
                    reader.readAsDataURL(file);
                }
            });

            // Handle logo preview
            $('#profile_pic').change(function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#logoPreview').attr('src', e.target.result).show();
                        $('#logoPreview').parent().addClass('mt-3');
                        $('#logoError').addClass('d-none');
                    }
                    reader.readAsDataURL(file);
                } else {
                    $('#logoPreview').hide();
                    $('#logoPreview').parent().removeClass('mt-3');
                }
            });
        });

        document.querySelectorAll('.remove-photo').forEach(btn => {
            btn.addEventListener('click', function() {
                const photoId = this.getAttribute('data-photo-id');
                fetch(`/profile/profileImage/${photoId}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            this.parentElement.remove();
                        }
                    })
                    .catch(console.error);
            });
        });

        document.querySelectorAll('.remove-aadhaar').forEach(btn => {
            btn.addEventListener('click', function() {
                const photoId = this.getAttribute('data-photo-id');
                fetch(`/franchises/franchiseAadhaar/${photoId}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            this.parentElement.remove();
                        }
                    })
                    .catch(console.error);
            });
        });

        document.querySelectorAll('.remove-pancard').forEach(btn => {
            btn.addEventListener('click', function() {
                const photoId = this.getAttribute('data-photo-id');
                fetch(`/franchises/franchisePancard/${photoId}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            this.parentElement.remove();
                        }
                    })
                    .catch(console.error);
            });
        });

        // Trigger when pincode changes
        function fetchStateCity(pincode) {
            if (pincode.length === 6) {
                $.ajax({
                    url: '{{ route('getstatecity', ':pincode') }}'.replace(':pincode', pincode),
                    type: 'GET',
                    success: function(data) {
                        if (data.state_name) {
                            $("#state_id").val(data.id);
                            $("#state").val(data.state_name);
                        }
                        if (data.city_name) {
                            $("#city_id").val(data.id);
                            $("#city").val(data.city_name);
                        }
                    },
                    error: function() {
                        toastr.error('Invalid pincode or data not found.');
                        // alert('Invalid pincode or data not found.');
                    }
                });
            } else {
                $("#state_id").val("");
                $("#state").val("");
                $("#city_id").val("");
                $("#city").val("");
            }
        }

        // 1️⃣ Auto-fetch if pincode is already available on page load (edit mode)
        let existingPincode = $("#pincode").val();
        if (existingPincode && existingPincode.length === 6) {
            fetchStateCity(existingPincode);
        }

        // 2️⃣ Fetch on pincode change
        $("#pincode").on('input', function() {
            fetchStateCity($(this).val());
        });

        $('#aadharcard_image').change(function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    $('#aadharcardPreview').attr('src', e.target.result).show();
                    $('#aadharcardPreview').parent().addClass('mt-3');
                }
                reader.readAsDataURL(file);
            } else {
                $('#aadharcardPreview').attr('src',
                    '{{ $franchise ? asset('storage/' . $franchise->aadharcard_image) : '#' }}'
                ).toggle(!!'{{ $franchise ? $franchise->aadharcard_image : '' }}');
                $('#aadharcardPreview').parent().toggleClass('mt-3', !!
                    '{{ $franchise ? $franchise->aadharcard_image : '' }}');
            }
        });

        // Handle pancard_image preview
        $('#pancard_image').change(function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    $('#pancardPreview').attr('src', e.target.result).show();
                    $('#pancardPreview').parent().addClass('mt-3');
                }
                reader.readAsDataURL(file);
            } else {
                $('#pancardPreview').attr('src',
                    '{{ $franchise ? asset('storage/' . $franchise->pancard_image) : '#' }}'
                ).toggle(!!'{{ $franchise ? $franchise->pancard_image : '' }}');
                $('#pancardPreview').parent().toggleClass('mt-3', !!
                    '{{ $franchise ? $franchise->pancard_image : '' }}');
            }
        });
    </script>
@endsection

{{-- <x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    {{ __("You're logged in!") }}
                </div>
            </div>
        </div>
    </div>
</x-app-layout> --}}


{{-- <x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Profile') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
            <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                <div class="max-w-xl">
                    @include('profile.partials.update-profile-information-form')
                </div>
            </div>

            <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                <div class="max-w-xl">
                    @include('profile.partials.update-password-form')
                </div>
            </div>

            <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                <div class="max-w-xl">
                    @include('profile.partials.delete-user-form')
                </div>
            </div>
        </div>
    </div>
</x-app-layout> --}}