@extends('backend.app')

@section('title', 'Create Store')

@push('style')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<style>
    /* Force the Select2 container to utilize full container block formatting */
    .select2-container {
        width: 100% !important;
        display: block;
    }
    /* Restyle the internal select box components to match Bootstrap sizing standards */
    .select2-container .select2-selection--single {
        height: 38px !important; /* Matches standard Bootstrap 5 form control heights */
        padding: 5px;
    }
</style>
@endpush
@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Create Store</h1>
    </div>
    <div class="ms-auto pageheader-btn">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.store.index') }}">Stores</a></li>
            <li class="breadcrumb-item active" aria-current="page">Create</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <form action="{{ route('admin.store.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <!-- Card 1: Basic Information -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h3 class="card-title mb-0"><i class="fe fe-info me-2"></i>Store Information</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="name" class="form-label font-weight-semibold">Store Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="name" class="form-control" value="{{ old('name') }}" placeholder="Store name" required>
                            @error('name') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="logo" class="form-label font-weight-semibold">Store Logo</label>
                            <input type="file" name="logo" id="logo" class="form-control" accept="image/*" onchange="previewLogo(this)">
                            @error('logo') <span class="text-danger">{{ $message }}</span> @enderror
                            <div class="mt-2">
                                <img id="logo-preview-img" src="{{ asset('frontend/no-image.jpg') }}" alt="Logo Preview" class="img-thumbnail" style="width: 80px; height: 80px; object-fit: cover;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 2: Manager & Contact Credentials -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                    <h3 class="card-title mb-0"><i class="fe fe-user me-2"></i>Manager & Contact Info</h3>
                    <button type="button" class="btn btn-sm btn-light text-success font-weight-bold" data-bs-toggle="modal" data-bs-target="#inviteManagerModal">
                        <i class="fe fe-plus"></i> Invite New Manager
                    </button>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4 ">
                            <label for="manager_selector" class="form-label font-weight-semibold">Select Store Manager <span class="text-danger">*</span></label>
                            <select id="manager_selector" class="form-select select2" data-placeholder="Choose a manager" required>
                                <option value=""></option>
                                @foreach ($managers as $manager)
                                    <option value="{{ $manager->id }}" data-name="{{ $manager->name }}" data-email="{{ $manager->email }}" {{ old('store_email') == $manager->email ? 'selected' : '' }}>
                                        {{ $manager->name }} ({{ $manager->email }})
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Read-only inputs representing the selected manager details that will be posted -->
                        <div class="col-md-4">
                            <label for="store_manager_name" class="form-label font-weight-semibold">Manager Name</label>
                            <input type="text" name="store_manager_name" id="store_manager_name" class="form-control bg-light" value="{{ old('store_manager_name') }}" readonly placeholder="Selected manager name" required>
                            @error('store_manager_name') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="col-md-4">
                            <label for="store_email" class="form-label font-weight-semibold">Store / Manager Email</label>
                            <input type="email" name="store_email" id="store_email" class="form-control bg-light" value="{{ old('store_email') }}" readonly placeholder="Selected manager email" required>
                            @error('store_email') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="col-md-12">
                            <label for="store_phone" class="form-label font-weight-semibold">Store Phone <span class="text-danger">*</span></label>
                            <input type="tel" name="store_phone" id="store_phone" class="form-control" value="{{ old('store_phone') }}" placeholder="Store phone number" required>
                            @error('store_phone') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 3: Address Details -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-info text-white">
                    <h3 class="card-title mb-0"><i class="fe fe-map-pin me-2"></i>Address Information</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="street" class="form-label font-weight-semibold">Street Address <span class="text-danger">*</span></label>
                            <input type="text" name="street" id="street" class="form-control" value="{{ old('street') }}" placeholder="123 Main St" required>
                            @error('street') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="col-md-3 mb-3">
                            <label for="city" class="form-label font-weight-semibold">City <span class="text-danger">*</span></label>
                            <input type="text" name="city" id="city" class="form-control" value="{{ old('city') }}" placeholder="City" required>
                            @error('city') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="col-md-3 mb-3">
                            <label for="state" class="form-label font-weight-semibold">State <span class="text-danger">*</span></label>
                            <input type="text" name="state" id="state" class="form-control" value="{{ old('state') }}" placeholder="State" required>
                            @error('state') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="postal_code" class="form-label font-weight-semibold">Zip Code <span class="text-danger">*</span></label>
                            <input type="text" name="postal_code" id="postal_code" class="form-control" value="{{ old('postal_code') }}" placeholder="Zip Code" required>
                            @error('postal_code') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="country" class="form-label font-weight-semibold">Country <span class="text-danger">*</span></label>
                            <input type="text" name="country" id="country" class="form-control" value="{{ old('country') }}" placeholder="Country" required>
                            @error('country') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-4">
                <button type="submit" class="btn btn-primary px-5"><i class="fe fe-check me-2"></i>Create Store</button>
                <a href="{{ route('admin.store.index') }}" class="btn btn-secondary px-4">Cancel</a>
            </div>
        </form>
    </div>
</div>

<!-- Invite Manager Modal -->
<div class="modal fade" id="inviteManagerModal" tabindex="-1" aria-labelledby="inviteManagerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="inviteManagerModalLabel"><i class="fe fe-user-plus me-2"></i>Invite Store Manager</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info py-2" role="alert">
                    This will create a manager account and send a password activation link to their email address.
                </div>
                <div class="mb-3">
                    <label for="modal_manager_name" class="form-label font-weight-semibold">Full Name</label>
                    <input type="text" id="modal_manager_name" class="form-control" placeholder="e.g. John Doe">
                    <span class="text-danger modal-error" id="error_modal_manager_name"></span>
                </div>
                <div class="mb-3">
                    <label for="modal_manager_email" class="form-label font-weight-semibold">Email Address</label>
                    <input type="email" id="modal_manager_email" class="form-control" placeholder="e.g. john@example.com">
                    <span class="text-danger modal-error" id="error_modal_manager_email"></span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="btnSubmitInvite"><i class="fe fe-send me-1"></i> Send Invite</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        // Initialize select2
        $('#manager_selector').select2({
            width: 'resolve',
            allowClear: true,
            placeholder: 'Select a manager'
        });

        // Autofill manager inputs on dropdown selection
        $('#manager_selector').on('change', function () {
            let selectedOption = $(this).find(':selected');
            if (selectedOption.val()) {
                $('#store_manager_name').val(selectedOption.data('name'));
                $('#store_email').val(selectedOption.data('email'));
            } else {
                $('#store_manager_name').val('');
                $('#store_email').val('');
            }
        });

        // AJAX Invite Manager Modal Submit
        $('#btnSubmitInvite').on('click', function () {
            // Reset error messages
            $('.modal-error').text('');
            $(this).prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Sending...');

            let name = $('#modal_manager_name').val();
            let email = $('#modal_manager_email').val();

            $.ajax({
                type: 'POST',
                url: '{{ route('admin.store.invite.manager') }}',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    name: name,
                    email: email
                },
                success: function (resp) {
                    $('#btnSubmitInvite').prop('disabled', false).html('<i class="fe fe-send me-1"></i> Send Invite');
                    if (resp.success) {
                        toastr.success(resp.message);
                        // Add new manager to dropdown list dynamically
                        let newOption = new Option(name + ' (' + email + ')', email, true, true);
                        $(newOption).attr('data-name', name);
                        $(newOption).attr('data-email', email);
                        $('#manager_selector').append(newOption).trigger('change');

                        // Clear & Close Modal
                        $('#modal_manager_name').val('');
                        $('#modal_manager_email').val('');
                        $('#inviteManagerModal').modal('hide');
                    } else {
                        toastr.error(resp.message);
                    }
                },
                error: function (xhr) {
                    $('#btnSubmitInvite').prop('disabled', false).html('<i class="fe fe-send me-1"></i> Send Invite');
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        if (errors.name) {
                            $('#error_modal_manager_name').text(errors.name[0]);
                        }
                        if (errors.email) {
                            $('#error_modal_manager_email').text(errors.email[0]);
                        }
                    } else {
                        toastr.error('An error occurred. Please try again.');
                    }
                }
            });
        });
    });

    // Logo image live upload preview
    function previewLogo(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#logo-preview-img').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        } else {
            $('#logo-preview-img').attr('src', '{{ asset('frontend/no-image.jpg') }}');
        }
    }
</script>
@endpush