@extends('admin.layout.app')
@section('title', 'Create New 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 {
            max-width: 150px;
            max-height: 150px;
            object-fit: cover;
            display: none;
            margin-top: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .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">Add User</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="students.html">Users</a></li>
                            <li class="breadcrumb-item active">Add 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.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-12">
                                    <h5 class="form-title student-info">User Information <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') }}" 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') }}" 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"
                                            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" 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 name="gender" class="form-control">
                                            <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>Female
                                            </option>
                                            <option value="Male" {{ old('gender') == 'Male' ? 'selected' : '' }}>Male
                                            </option>
                                            <option value="Others" {{ old('gender') == 'Others' ? 'selected' : '' }}>Others
                                            </option>
                                        </select>
                                    </div>
                                </div>



                                <div class="col-12 col-sm-4">
                                    <div class="form-group local-forms">
                                        <label>Password <span class="login-danger">*</span></label>
                                        <input name="password" class="form-control pass-input" type="text">
                                        <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 }}"
                                                    {{ Auth::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"
                                                style="display:none; max-width: 100%; max-height: 300px; border:1px solid #ccc; border-radius:4px; margin-bottom:10px; object-fit: contain;" />
                                            <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">Submit</button>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="old_region" value="{{ old('region') }}">
                            <input type="hidden" id="old_district" value="{{ old('district') }}">
                            <input type="hidden" id="old_township" value="{{ old('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');

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

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

                    if (!selectedRegion) return;

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

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

                    if (!selectedDistrict) 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.prop('disabled', false);
                            districtObj.townships.forEach(township => {
                                $townshipSelect.append(
                                    `<option value="${township.eng}">${township.eng} - ${township.mm}</option>`
                                );
                            });
                        }
                    }
                });
            });
        });
    </script>
    <script>
        $(function() {
            $('#date_of_birth').datetimepicker({
                format: 'DD.MMM.YYYY',
                locale: 'en'
            });
            var dropzone = $('#photo-dropzone');
            var inputFile = $('#student-photo');
            var preview = $('#photo-preview');
            var uploadBtn = $('#upload-btn');
            var uploadText = $('#upload-text');
            uploadText.on('click', function(e) {
                e.stopPropagation();
                inputFile.trigger('click');
                inputFile.trigger('click');
            });
            uploadBtn.on('click', function(e) {
                e.stopPropagation();
                inputFile.trigger('click');
                inputFile.trigger('click');
            });
            dropzone.on('dragover', function(e) {
                e.preventDefault();
                e.stopPropagation();
                dropzone.addClass('hover');
                dropzone.addClass('hover');
            });
            dropzone.on('dragleave drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
                dropzone.removeClass('hover');
                dropzone.removeClass('hover');
            });
            dropzone.on('drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
                e.stopPropagation();
                var files = e.originalEvent.dataTransfer.files;
                if (files.length > 0) {
                    inputFile.prop('files',
                        files); // update input's files for form submission   previewFile(files[0]);
                    previewFile(files[0]);
                }
            });
            // Handle file selected from dialog
            inputFile.on('change', function() {
                if (this.files && this.files[0]) {
                    previewFile(this.files[0]);
                    previewFile(this.files[0]);
                }
            });

            function previewFile(file) {
                if (!file.type.startsWith('image/')) {
                    // alert('Please upload an image file.');
                    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();
                    uploadText.hide();
                }
                reader.readAsDataURL(file);
                reader.readAsDataURL(file);
            }
        });
    </script>
@endpush