@extends('admin.layout.app')
@section('title', 'Edit User')
@push('styles')
    <style>
        .dropzone {
            border: 2px dashed #bbb;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            color: #666;
            max-width: 180px;
            margin: auto;
            position: relative;
        }

        .dropzone.hover {
            border-color: #333;
            background: #f8f8f8;
        }

        .dropzone img {
            display: block;
            margin: 0 auto 10px auto;
            max-width: 150px;
            max-height: 150px;
            object-fit: cover;
            border: 2px solid #ccc;
            border-radius: 8px;
            background: #f8f8f8;
        }

        .dropzone input[type="file"] {
            display: none;
        }
    </style>
@endpush
@section('content')


    <div class="content container-fluid">

        <div class="page-header">
            <div class="row align-items-center">
                <div class="col-sm-12">
                    <div class="page-sub-header">
                        <h3 class="page-title">Edit User</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="students.html">Users</a></li>
                            <li class="breadcrumb-item active">Edit User</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="card comman-shadow">
                    <div class="card-body">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <form action="{{ route('admin.user.update', $user->id) }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            @method('PUT') {{-- or PATCH --}}
                            <div class="row">
                                <div class="col-12">
                                    <h5 class="form-title student-info">Edit User <span><a href="javascript:;"><i
                                                    class="feather-more-vertical"></i></a></span></h5>
                                </div>
                                <div class="col-12 col-sm-4">
                                    <div class="form-group local-forms">
                                        <label>Name <span class="login-danger">*</span></label>
                                        <input name="name" class="form-control" type="text"
                                            value="{{ old('name', $user->name) }}" placeholder="Enter Name">
                                    </div>
                                </div>
                                <div class="col-12 col-sm-4">
                                    <div class="form-group local-forms">
                                        <label>E-Mail <span class="login-danger">*</span></label>
                                        <input name="email" class="form-control" type="text"
                                            value="{{ old('email', $user->email) }}" placeholder="Enter Email Address">
                                    </div>
                                </div>
                                <div class="col-12 col-sm-4">
                                    <div class="form-group local-forms">
                                        <label>Phone Number<span class="login-danger">*</span></label>
                                        <input name="phone" class="form-control" type="text"
                                            value="{{ old('phone', $user->phone) }}" placeholder="Enter Phone Number">
                                    </div>
                                </div>
                                <div class="col-12 col-sm-4">
                                    <div class="form-group local-forms calendar-icon">
                                        <label>Date Of Birth <span class="login-danger">*</span></label>
                                        <input name="date_of_birth" id="date_of_birth" class="form-control datetimepicker"
                                            type="text"
                                            value="{{ old('date_of_birth', \Carbon\Carbon::parse($user->date_of_birth)->format('d-m-Y')) }}"
                                            placeholder="DD-MM-YYYY">
                                    </div>
                                </div>

                                <!-- Region -->
                                <div class="mb-3 col-md-4 local-forms">
                                    <label for="region_select">Region <span class="text-danger">*</span></label>
                                    <select id="region_select" name="region" class="form-control">
                                        <option value="">Select Region</option>
                                        <!-- Options added by JS -->
                                    </select>
                                </div>

                                <!-- District -->
                                <div class="mb-3 col-md-4 local-forms">
                                    <label for="district_select">District <span class="text-danger">*</span></label>
                                    <select id="district_select" name="district" class="form-control" disabled>
                                        <option value="">Select District</option>
                                        <!-- Options added by JS -->
                                    </select>
                                </div>

                                <!-- Township -->
                                <div class="mb-3 col-md-4 local-forms">
                                    <label for="township_select">Township <span class="text-danger">*</span></label>
                                    <select id="township_select" name="township" class="form-control" disabled>
                                        <option value="">Select Township</option>
                                        <!-- Options added by JS -->
                                    </select>
                                </div>

                                <div class="col-12 col-sm-4">
                                    <div class="form-group local-forms">
                                        <label>Gender <span class="login-danger">*</span></label>
                                        <select class="form-control form-select" name="gender">
                                            <option>Select Gender</option>
                                            <option value="Female"
                                                {{ old('gender', $user->gender) == 'Female' ? 'selected' : '' }}>
                                                Female
                                            </option>
                                            <option value="Male"
                                                {{ old('gender', $user->gender) == 'Male' ? 'selected' : '' }}>Male
                                            </option>
                                            <option value="Others"
                                                {{ old('gender', $user->gender) == 'Others' ? 'selected' : '' }}>
                                                Others
                                            </option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-12 col-sm-4">
                                    <div class="form-group local-forms">

                                        <label>Password <small>(leave blank if you don’t want to change)</small></label>
                                        <input name="password" class="form-control pass-input" type="password"
                                            placeholder="New Password">
                                        <span class="profile-views feather-eye toggle-password"></span>
                                    </div>
                                </div>

                                <div class="col-12 col-sm-4">
                                    <div class="form-group local-forms">
                                        <label>Roles <span class="login-danger">*</span></label>
                                        <select name="role" class="form-control form-select">
                                            @foreach ($roles as $role)
                                                <option value="{{ $role->name }}"
                                                    {{ $user->hasRole($role->name) ? 'selected' : '' }}>
                                                    {{ ucfirst($role->name) }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                </div>


                                <div class="col-12">
                                    <div class="form-group students-up-files">
                                        <label> User Photo (150px X 150px)</label>
                                        <div class="dropzone" id="photo-dropzone"
                                            style="cursor:pointer; width: 100%; max-width: 400px; padding: 15px; border: 2px dashed #ccc; border-radius: 6px;">
                                            <p id="upload-text"
                                                style="margin-bottom: 10px; user-select:none; text-align:center;">
                                                Drag & Drop or Click to Upload
                                            </p>
                                            <input type="file" id="student-photo" name="image" accept="image/*"
                                                style="display:none;" />
                                            <img id="photo-preview" alt="Image Preview"
                                                src="{{ $user->image && $user->image->path ? asset('storage/' . $user->image->path) : '' }}"
                                                style="display: {{ $user->image && $user->image->path ? 'block' : 'none' }};
                                                       margin: 0 auto 10px auto;
                                                       max-width: 150px;
                                                       max-height: 150px;
                                                       border: 2px solid #ccc;
                                                       border-radius: 8px;
                                                       object-fit: cover;" />
                                            <button type="button" id="upload-btn"
                                                class="mx-auto btn btn-primary btn-sm d-block">
                                                Upload
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="student-submit">
                                        <button type="submit" class="btn btn-primary">Update</button>
                                    </div>
                                </div>
                            </div>
                            {{-- Hidden fields for JS to preselect --}}
                            <input type="hidden" id="old_region" value="{{ old('region', $user->region) }}">
                            <input type="hidden" id="old_district"
                                value="{{ old('district', $user->district ?? '') }}">
                            <input type="hidden" id="old_township" value="{{ old('township', $user->township) }}">
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(function() {
            $.getJSON('/location.json', function(response) {
                const regions = response.data;
                const $regionSelect = $('#region_select');
                const $districtSelect = $('#district_select');
                const $townshipSelect = $('#township_select');
                const oldRegion = $('#old_region').val();
                const oldDistrict = $('#old_district').val();
                const oldTownship = $('#old_township').val();

                // Populate regions
                $regionSelect.empty().append('<option value="">Select Region</option>');
                regions.forEach(region => {
                    $regionSelect.append(
                        `<option value="${region.eng}">${region.eng} - ${region.mm}</option>`
                    );
                });

                // Set selected region
                if (oldRegion) {
                    $regionSelect.val(oldRegion).trigger('change');
                }

                // On region change, populate districts
                $regionSelect.on('change', function() {
                    const selectedRegion = $(this).val();
                    $townshipSelect.empty().append('<option value="">Select Township</option>')
                        .prop('disabled', true);

                    if (!selectedRegion) {
                        $districtSelect.empty().append('<option value="">Select District</option>')
                            .prop('disabled', true);
                        return;
                    }

                    const regionObj = regions.find(r => r.eng === selectedRegion);
                    if (regionObj && regionObj.districts) {
                        $districtSelect.empty().append('<option value="">Select District</option>');
                        regionObj.districts.forEach(district => {
                            $districtSelect.append(
                                `<option value="${district.eng}">${district.eng} - ${district.mm}</option>`
                            );
                        });
                        $districtSelect.prop('disabled', false);

                        // Set selected district if editing
                        if (oldDistrict) {
                            $districtSelect.val(oldDistrict).trigger('change');
                        }
                    } else {
                        $districtSelect.empty().append('<option value="">Select District</option>')
                            .prop('disabled', true);
                    }
                });

                // On district change, populate townships
                $districtSelect.on('change', function() {
                    const selectedRegion = $regionSelect.val();
                    const selectedDistrict = $(this).val();

                    if (!selectedDistrict) {
                        $townshipSelect.empty().append('<option value="">Select Township</option>')
                            .prop('disabled', true);
                        return;
                    }

                    const regionObj = regions.find(r => r.eng === selectedRegion);
                    if (regionObj && regionObj.districts) {
                        const districtObj = regionObj.districts.find(d => d.eng ===
                            selectedDistrict);
                        if (districtObj && districtObj.townships) {
                            $townshipSelect.empty().append(
                                '<option value="">Select Township</option>');
                            districtObj.townships.forEach(township => {
                                $townshipSelect.append(
                                    `<option value="${township.eng}">${township.eng} - ${township.mm}</option>`
                                );
                            });
                            $townshipSelect.prop('disabled', false);

                            // Set selected township if editing
                            if (oldTownship) {
                                $townshipSelect.val(oldTownship);
                            }
                        } else {
                            $townshipSelect.empty().append(
                                '<option value="">Select Township</option>').prop('disabled',
                                true);
                        }
                    }
                });

                // If editing, trigger change to preselect values
                if (oldRegion) {
                    $regionSelect.trigger('change');
                }
            }).fail(function() {
                alert('Failed to load location data');
            });

            $('#date_of_birth').datetimepicker({
                format: 'DD-MM-YYYY',
                locale: 'en'
            });

            var dropzone = $('#photo-dropzone');
            var inputFile = $('#student-photo');
            var preview = $('#photo-preview');
            var uploadText = $('#upload-text');
            var uploadBtn = $('#upload-btn');

            uploadText.on('click', function(e) {
                e.stopPropagation();
                inputFile.trigger('click');
            });

            uploadBtn.on('click', function(e) {
                e.stopPropagation();
                inputFile.trigger('click');
            });

            dropzone.on('dragover', function(e) {
                e.preventDefault();
                e.stopPropagation();
                dropzone.addClass('hover');
            });

            dropzone.on('dragleave drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
                dropzone.removeClass('hover');
            });

            dropzone.on('drop', function(e) {
                e.preventDefault();
                e.stopPropagation();

                var files = e.originalEvent.dataTransfer.files;
                if (files.length > 0) {
                    inputFile.prop('files', files);
                    previewFile(files[0]);
                }
            });

            inputFile.on('change', function() {
                if (this.files && this.files[0]) {
                    previewFile(this.files[0]);
                }
            });

            function previewFile(file) {
                if (!file.type.startsWith('image/')) {
                    alert('Please upload an image file.');
                    preview.hide();
                    inputFile.val('');
                    uploadText.show();
                    return;
                }
                var reader = new FileReader();
                reader.onload = function(e) {
                    preview.attr('src', e.target.result).show();
                    uploadText.hide();
                }
                reader.readAsDataURL(file);
            }
        });
    </script>
@endpush