@extends('layouts.master')
@section('title')
    @isset($data)
        Edit Branch
    @else
        Add Branch
    @endisset
@endsection

@section('content')
    @php
        // Get old values for country, state, city
        $oldCountry = old('country', isset($data) ? $data->region : null);
        $oldState = old('state', isset($data) ? $data->state : null);
        $oldCity = old('city', isset($data) ? $data->city : null);

        // Get all countries for the dropdown
        $countries = \App\Models\Country::all();

        // Get states and cities if editing
        $states = collect();
        $cities = collect();

        if ($oldCountry) {
            $states = \App\Models\State::where('country_id', $oldCountry)->get();
        }

        if ($oldState) {
            $cities = \App\Models\City::where('state_id', $oldState)->get();
        }

        $currentStep = old('current_step', isset($data) ? $data->temp_step : 1);
    @endphp

    <style>
        .step-sidebar {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
        }

        .step-item {
            display: flex;
            align-items: flex-start;
            padding: 20px;
            margin-bottom: 15px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .step-item.active {
            background: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .step-item.completed {
            opacity: 0.7;
        }

        .step-icon {
            width: 48px;
            height: 48px;
            background: #e9ecef;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 24px;
        }

        .step-item.active .step-icon {
            background: #f3e8ff;
            color: #7c3aed;
        }

        .step-content h6 {
            margin: 0 0 5px 0;
            font-weight: 600;
            font-size: 16px;
        }

        .step-content p {
            margin: 0;
            font-size: 13px;
            color: #6c757d;
        }

        .step-badge {
            background: #fbbf24;
            color: #92400e;
            padding: 2px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 8px;
        }

        .form-section {
            background: #fff;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .form-section h4 {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 30px;
        }

        .form-label {
            font-weight: 500;
            margin-bottom: 8px;
            color: #374151;
        }

        .form-control,
        .form-select {
            border: 1px solid #d1d5db;
            border-radius: 6px;
            padding: 10px 14px;
            font-size: 14px;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #7c3aed;
            box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
        }

        .form-select:disabled {
            background-color: #f3f4f6;
            cursor: not-allowed;
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            margin: 30px 0 20px 0;
            color: #111827;
        }

        .form-check {
            padding: 15px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            margin-bottom: 15px;
        }

        .form-check-input:checked {
            background-color: #7c3aed;
            border-color: #7c3aed;
        }

        .form-check-label {
            font-weight: 500;
            margin-bottom: 5px;
        }

        .form-check p {
            margin: 0;
            font-size: 13px;
            color: #6b7280;
        }

        .btn-next {
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            color: white;
            padding: 12px 30px;
            border-radius: 8px;
            border: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-next:hover {
            background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%);
            color: white;
        }

        .btn-previous {
            background: transparent;
            color: #6b7280;
            padding: 12px 30px;
            border-radius: 8px;
            border: 1px solid #d1d5db;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-previous:hover {
            background: #f9fafb;
            color: #374151;
        }

        .loading-text {
            color: #6b7280;
            font-style: italic;
        }
    </style>

    <div class="row">
        <!-- Sidebar Steps -->
        <div class="col-lg-3">
            <div class="step-sidebar">
                <div class="step-item active">
                    <div class="step-icon">🏢</div>
                    <div class="step-content">
                        <h6>Branch Details <span class="step-badge">In Progress</span></h6>
                        <p>Add name and address of your business branch</p>
                    </div>
                </div>

                <div class="step-item">
                    <div class="step-icon">🪑</div>
                    <div class="step-content">
                        <h6>Table Management</h6>
                        <p>Manage tables on your branch for advanced seating</p>
                    </div>
                </div>

                <div class="step-item">
                    <div class="step-icon">👥</div>
                    <div class="step-content">
                        <h6>Team Members</h6>
                        <p>Add your team members working in this branch</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Form -->
        <div class="col-lg-9">
            <form id="branchForm" method="POST">
                @csrf
                @isset($data)
                    <input type="hidden" name="id" value="{{ $data->id }}">
                @endisset
                <input type="hidden" name="current_step" value="{{ (int) $currentStep }}">

                <div class="form-section">
                    <h4>Branch Details</h4>

                    <!-- Branch Name and Address Row -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Branch Name <span class="text-danger">*</span></label>
                            <input type="text" name="branch_name"
                                class="form-control @error('branch_name') is-invalid @enderror"
                                placeholder="Enter your branch name"
                                value="{{ old('branch_name', $data->branch_name ?? '') }}" required>
                            @error('branch_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Address <span class="text-danger">*</span></label>
                            <input type="text" name="address" class="form-control @error('address') is-invalid @enderror"
                                placeholder="Enter branch address" value="{{ old('address', $data->branch_address ?? '') }}"
                                required>
                            @error('address')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Country, State, City, Pincode Row -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label class="form-label">Country <span class="text-danger">*</span></label>
                            <select name="country" id="country" class="form-select @error('country') is-invalid @enderror"
                                required>
                                <option value="">-- Select Country --</option>
                                @foreach ($countries as $country)
                                    <option value="{{ $country->id }}" {{ $oldCountry == $country->id ? 'selected' : '' }}>
                                        {{ $country->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('country')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">State <span class="text-danger">*</span></label>
                            <select name="state" id="state" class="form-select @error('state') is-invalid @enderror"
                                required>
                                <option value="">-- Select State --</option>
                                @foreach ($states as $state)
                                    <option value="{{ $state->id }}" {{ $oldState == $state->id ? 'selected' : '' }}>
                                        {{ $state->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('state')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">City <span class="text-danger">*</span></label>
                            <select name="city" id="city" class="form-select @error('city') is-invalid @enderror"
                                required>
                                <option value="">-- Select City --</option>
                                @foreach ($cities as $city)
                                    <option value="{{ $city->id }}" {{ $oldCity == $city->id ? 'selected' : '' }}>
                                        {{ $city->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('city')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Pincode <span class="text-danger">*</span></label>
                            <input type="text" name="pincode" class="form-control @error('pincode') is-invalid @enderror"
                                placeholder="Enter pincode" value="{{ old('pincode', $data->pincode ?? '') }}" required>
                            @error('pincode')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Contact Details Section -->
                    <h5 class="section-title">Contact Details</h5>

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label class="form-label">Primary Contact Name</label>
                            <input type="text" name="branch_contact_name"
                                class="form-control @error('branch_contact_name') is-invalid @enderror"
                                placeholder="Primary contact name"
                                value="{{ old('branch_contact_name', $data->branch_contact_name ?? '') }}">
                            @error('branch_contact_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Contact Number</label>
                            <input type="tel" name="branch_contact_phone"
                                class="form-control @error('branch_contact_phone') is-invalid @enderror"
                                placeholder="Enter contact number"
                                value="{{ old('branch_contact_phone', $data->branch_contact_phone ?? '') }}">
                            @error('branch_contact_phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Email Address</label>
                            <input type="email" name="branch_contact_email"
                                class="form-control @error('branch_contact_email') is-invalid @enderror"
                                placeholder="Enter contact email address"
                                value="{{ old('branch_contact_email', $data->branch_contact_email ?? '') }}">
                            @error('branch_contact_email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Additional Setup Section -->
                    <h5 class="section-title">Additional Setup</h5>

                    <!-- Hidden field for unchecked state -->
                    <input type="hidden" name="reservations" value="0">

                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="reservations" name="reservations"
                            value="1"
                            {{ old('reservations', $data->reservation_enabled ?? false) ? 'checked' : '' }}>
                        <label class="form-check-label d-block" for="reservations">
                            <strong>Reservations</strong>
                            <p>Enable users to prebook a table on this branch.</p>
                        </label>
                    </div>

                    <!-- Form Actions -->
                    <div class="d-flex justify-content-between align-items-center mt-4">
                        <button type="button" class="btn btn-previous" onclick="window.history.back()">
                            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path fill-rule="evenodd"
                                    d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
                            </svg>
                            Previous
                        </button>
                        <button type="submit" class="btn btn-next">
                            Next
                            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path fill-rule="evenodd"
                                    d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                            </svg>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            console.log('jQuery loaded successfully');

            // Country change handler
            $('#country').on('change', function() {
                const countryID = $(this).val();
                console.log('Country selected:', countryID);

                // Clear state and city dropdowns
                $('#state').html('<option value="">-- Select State --</option>');
                $('#city').html('<option value="">-- Select City --</option>');

                if (countryID) {
                    // Disable dropdowns while loading
                    $('#state').prop('disabled', true).html('<option value="">Loading states...</option>');
                    $('#city').prop('disabled', true);

                    $.ajax({
                        url: "{{ url('/') }}/get-states/" + countryID,
                        type: "GET",
                        dataType: 'json',
                        success: function(data) {
                            console.log('States received:', data);
                            $('#state').html('<option value="">-- Select State --</option>');

                            if (data && data.length > 0) {
                                $.each(data, function(key, value) {
                                    $('#state').append('<option value="' + value.id +
                                        '">' +
                                        value.name + '</option>');
                                });
                            } else {
                                $('#state').html(
                                    '<option value="">No states available</option>');
                            }

                            $('#state').prop('disabled', false);
                        },
                        error: function(xhr, status, error) {
                            console.error('Error loading states:', error);
                            console.error('Response:', xhr.responseText);
                            $('#state').html('<option value="">-- Select State --</option>');
                            $('#state').prop('disabled', false);
                            alert('Failed to load states. Please try again.');
                        }
                    });
                } else {
                    $('#state').prop('disabled', false);
                    $('#city').prop('disabled', false);
                }
            });

            // State change handler
            $('#state').on('change', function() {
                const stateID = $(this).val();
                console.log('State selected:', stateID);

                // Clear city dropdown
                $('#city').html('<option value="">-- Select City --</option>');

                if (stateID) {
                    // Disable city dropdown while loading
                    $('#city').prop('disabled', true).html('<option value="">Loading cities...</option>');

                    $.ajax({
                        url: "{{ url('/') }}/get-cities/" + stateID,
                        type: "GET",
                        dataType: 'json',
                        success: function(data) {
                            console.log('Cities received:', data);
                            $('#city').html('<option value="">-- Select City --</option>');

                            if (data && data.length > 0) {
                                $.each(data, function(key, value) {
                                    $('#city').append('<option value="' + value.id +
                                        '">' +
                                        value.name + '</option>');
                                });
                            } else {
                                $('#city').html(
                                    '<option value="">No cities available</option>');
                            }

                            $('#city').prop('disabled', false);
                        },
                        error: function(xhr, status, error) {
                            console.error('Error loading cities:', error);
                            console.error('Response:', xhr.responseText);
                            $('#city').html('<option value="">-- Select City --</option>');
                            $('#city').prop('disabled', false);
                            alert('Failed to load cities. Please try again.');
                        }
                    });
                } else {
                    $('#city').prop('disabled', false);
                }
            });

            // Form submission with AJAX
            $('#branchForm').on('submit', function(e) {
                e.preventDefault();

                const currentStepInput = $('input[name="current_step"]');
                currentStepInput.val(parseInt(currentStepInput.val()) || 1);

                const reservationsCheckbox = $('#reservations');
                if (!reservationsCheckbox.is(':checked')) {
                    $('input[type="hidden"][name="reservations"][value="0"]').remove();
                    $('<input>').attr({
                        type: 'hidden',
                        name: 'reservations',
                        value: '0'
                    }).appendTo('#branchForm');
                } else {
                    $('input[type="hidden"][name="reservations"][value="0"]').remove();
                    reservationsCheckbox.val('1');
                }

                const formData = $(this).serialize();
                const submitBtn = $(this).find('button[type="submit"]');
                const originalText = submitBtn.html();

                submitBtn.prop('disabled', true).html('<span>Saving...</span>');

                $('.is-invalid').removeClass('is-invalid');
                $('.invalid-feedback').remove();

                $.ajax({
                    url: "{{ route('branch.store') }}",
                    type: "POST",
                    data: formData,
                    dataType: 'json',
                    success: function(response) {
                        if (response.success) {
                            if (response.requires_payment) {
                                alert(response.message);
                                if (response.payment_url) {
                                    window.location.href = response.payment_url;
                                }
                            } else {
                                // Redirect to step 2
                                window.location.href = response.redirect_url;
                            }
                        }
                    },
                    error: function(xhr) {
                        submitBtn.prop('disabled', false).html(originalText);

                        if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                            $.each(xhr.responseJSON.errors, function(key, value) {
                                const input = $('[name="' + key + '"]');
                                input.addClass('is-invalid');
                                input.after('<div class="invalid-feedback d-block">' +
                                    value[0] + '</div>');
                            });

                            $('html, body').animate({
                                scrollTop: $('.is-invalid').first().offset().top - 100
                            }, 500);
                        } else {
                            alert(xhr.responseJSON?.message ||
                                'An error occurred. Please try again.');
                        }
                    }
                });
            });

            // Clear validation errors on input change
            $('input, select').on('change', function() {
                $(this).removeClass('is-invalid');
                $(this).next('.invalid-feedback').remove();
            });
        });
    </script>
@endsection