@extends('layouts.master')
@section('title')
    Edit Branch - {{ $branch->branch_name }}
@endsection

@section('content')
    @php
        $oldCountry = old('country', $branch->region);
        $oldState = old('state', $branch->state);
        $oldCity = old('city', $branch->city);

        $countries = \App\Models\Country::all();
        $states = \App\Models\State::where('country_id', $oldCountry)->get();
        $cities = \App\Models\City::where('state_id', $oldState)->get();
    @endphp

    <style>
        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }

        .card-header {
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            color: white;
            border-radius: 12px 12px 0 0 !important;
            padding: 20px 30px;
            border: none;
        }

        .card-header h4 {
            margin: 0;
            font-weight: 600;
            font-size: 1.5rem;
        }

        .card-body {
            padding: 30px;
        }

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

        .form-control, .form-select {
            border: 1px solid #d1d5db;
            border-radius: 8px;
            padding: 10px 14px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

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

        .section-title {
            font-size: 18px;
            font-weight: 600;
            color: #111827;
            margin: 30px 0 20px 0;
            padding-bottom: 10px;
            border-bottom: 2px solid #f3f4f6;
        }

        .btn-primary {
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            border: none;
            border-radius: 8px;
            padding: 12px 30px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
        }

        .btn-secondary {
            background: #6b7280;
            border: none;
            border-radius: 8px;
            padding: 12px 30px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-secondary:hover {
            background: #4b5563;
        }

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

        .form-check:hover {
            border-color: #7c3aed;
        }

        .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;
        }

        .branch-info-card {
            background: #f8fafc;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 25px;
            border-left: 4px solid #7c3aed;
        }

        .branch-info-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid #e5e7eb;
        }

        .branch-info-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }

        .branch-info-label {
            font-weight: 500;
            color: #6b7280;
        }

        .branch-info-value {
            font-weight: 600;
            color: #374151;
        }

        .badge-status {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }

        .loading-spinner {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid #ffffff;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .alert {
            border-radius: 8px;
            border: none;
            padding: 15px 20px;
        }

        .alert-success {
            background: #d1fae5;
            color: #065f46;
        }

        .alert-danger {
            background: #fee2e2;
            color: #991b1b;
        }
    </style>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4>Edit Branch - {{ $branch->branch_name }}</h4>
                        <div class="badge bg-light text-dark p-2">
                            <i class="fas fa-code-branch me-2"></i>
                            {{ $branch->branch_code }}
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Branch Information Card -->
                    <div class="branch-info-card">
                        <h6 class="mb-3"><i class="fas fa-info-circle me-2"></i>Branch Information</h6>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="branch-info-item">
                                    <span class="branch-info-label">Branch Code:</span>
                                    <span class="branch-info-value">{{ $branch->branch_code }}</span>
                                </div>
                                <div class="branch-info-item">
                                    <span class="branch-info-label">Status:</span>
                                    <span class="branch-info-value">
                                        <span class="badge-status bg-{{ $branch->status == 'active' ? 'success' : 'secondary' }}">
                                            {{ ucfirst($branch->status) }}
                                        </span>
                                    </span>
                                </div>
                                <div class="branch-info-item">
                                    <span class="branch-info-label">Created Date:</span>
                                    <span class="branch-info-value">{{ $branch->created_at->format('M d, Y') }}</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="branch-info-item">
                                    <span class="branch-info-label">Reservations:</span>
                                    <span class="branch-info-value">
                                        <span class="badge-status bg-{{ $branch->reservation_enabled ? 'success' : 'secondary' }}">
                                            {{ $branch->reservation_enabled ? 'Enabled' : 'Disabled' }}
                                        </span>
                                    </span>
                                </div>
                                <div class="branch-info-item">
                                    <span class="branch-info-label">Advanced Seating:</span>
                                    <span class="branch-info-value">
                                        <span class="badge-status bg-{{ $branch->advanced_seating_enabled ? 'success' : 'secondary' }}">
                                            {{ $branch->advanced_seating_enabled ? 'Enabled' : 'Disabled' }}
                                        </span>
                                    </span>
                                </div>
                                <div class="branch-info-item">
                                    <span class="branch-info-label">Last Updated:</span>
                                    <span class="branch-info-value">{{ $branch->updated_at->format('M d, Y H:i') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <form id="branchEditForm" method="POST" action="{{ route('branch.update', $branch->id) }}">
                        @csrf
                        @method('PUT')

                        <!-- Basic Information Section -->
                        <h5 class="section-title">
                            <i class="fas fa-building me-2"></i>Basic Information
                        </h5>
                        
                        <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 branch name"
                                    value="{{ old('branch_name', $branch->branch_name) }}" required>
                                @error('branch_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Tenant <span class="text-danger">*</span></label>
                                <select name="tenant_id" class="form-select @error('tenant_id') is-invalid @enderror" required>
                                    <option value="">-- Select Tenant --</option>
                                    @foreach($tenants as $tenant)
                                        <option value="{{ $tenant->id }}" 
                                            {{ old('tenant_id', $branch->tenant_id) == $tenant->id ? 'selected' : '' }}>
                                            {{ $tenant->tenant_name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('tenant_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Address Information Section -->
                        <h5 class="section-title">
                            <i class="fas fa-map-marker-alt me-2"></i>Address Information
                        </h5>

                        <div class="row mb-3">
                            <div class="col-12">
                                <label class="form-label">Full Address <span class="text-danger">*</span></label>
                                <textarea name="branch_address" class="form-control @error('branch_address') is-invalid @enderror" 
                                    rows="3" placeholder="Enter complete branch address" required>{{ old('branch_address', $branch->branch_address) }}</textarea>
                                @error('branch_address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <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</label>
                                <input type="text" name="pincode" 
                                    class="form-control @error('pincode') is-invalid @enderror"
                                    placeholder="Enter pincode"
                                    value="{{ old('pincode', $branch->pincode) }}">
                                @error('pincode')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Contact Information Section -->
                        <h5 class="section-title">
                            <i class="fas fa-address-book me-2"></i>Contact Information
                        </h5>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label">Contact Person Name <span class="text-danger">*</span></label>
                                <input type="text" name="branch_contact_name"
                                    class="form-control @error('branch_contact_name') is-invalid @enderror"
                                    placeholder="Enter contact person name"
                                    value="{{ old('branch_contact_name', $branch->branch_contact_name) }}" required>
                                @error('branch_contact_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

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

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

                        <!-- Location & Features Section -->
                        <h5 class="section-title">
                            <i class="fas fa-cogs me-2"></i>Location & Features
                        </h5>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Location Reference</label>
                                <input type="text" name="location"
                                    class="form-control @error('location') is-invalid @enderror"
                                    placeholder="e.g., Near City Center, Opposite Mall"
                                    value="{{ old('location', $branch->location) }}">
                                @error('location')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Status</label>
                                <select name="status" class="form-select @error('status') is-invalid @enderror">
                                    <option value="active" {{ old('status', $branch->status) == 'active' ? 'selected' : '' }}>Active</option>
                                    <option value="inactive" {{ old('status', $branch->status) == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    <option value="maintenance" {{ old('status', $branch->status) == 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Features Section -->
                        <h5 class="section-title">
                            <i class="fas fa-star me-2"></i>Features
                        </h5>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="reservation" name="reservation" value="1"
                                        {{ old('reservation', $branch->reservation_enabled) ? 'checked' : '' }}>
                                    <label class="form-check-label d-block" for="reservation">
                                        <strong>Reservation System</strong>
                                        <p>Enable table reservations for this branch</p>
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="advanced_seating" name="advanced_seating" value="1"
                                        {{ old('advanced_seating', $branch->advanced_seating_enabled) ? 'checked' : '' }}>
                                    <label class="form-check-label d-block" for="advanced_seating">
                                        <strong>Advanced Seating</strong>
                                        <p>Enable detailed table and seat management</p>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-between align-items-center">
                                    <a href="{{ route('branch.index') }}" class="btn btn-secondary">
                                        <i class="fas fa-arrow-left me-2"></i>Back to List
                                    </a>
                                    <div>
                                        <button type="button" class="btn btn-secondary me-2" onclick="resetForm()">
                                            <i class="fas fa-redo me-2"></i>Reset
                                        </button>
                                        <button type="submit" class="btn btn-primary" id="submitBtn">
                                            <i class="fas fa-save me-2"></i>Update Branch
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
    $(document).ready(function() {
        // Country change handler
        $('#country').on('change', function() {
            const countryID = $(this).val();
            
            // Clear and disable dependent dropdowns
            $('#state').html('<option value="">-- Select State --</option>').prop('disabled', true);
            $('#city').html('<option value="">-- Select City --</option>').prop('disabled', true);

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

                $.ajax({
                    url: "{{ url('/') }}/get-states/" + countryID,
                    type: "GET",
                    dataType: 'json',
                    success: function(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);
                        
                        // Preselect state if available
                        const oldState = "{{ $oldState }}";
                        if (oldState) {
                            $('#state').val(oldState).trigger('change');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error loading states:', error);
                        $('#state').html('<option value="">Error loading states</option>').prop('disabled', false);
                        showAlert('Failed to load states. Please try again.', 'danger');
                    }
                });
            } else {
                $('#state').prop('disabled', false);
                $('#city').prop('disabled', false);
            }
        });

        // State change handler
        $('#state').on('change', function() {
            const stateID = $(this).val();
            
            $('#city').html('<option value="">-- Select City --</option>').prop('disabled', true);

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

                $.ajax({
                    url: "{{ url('/') }}/get-cities/" + stateID,
                    type: "GET",
                    dataType: 'json',
                    success: function(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);
                        
                        // Preselect city if available
                        const oldCity = "{{ $oldCity }}";
                        if (oldCity) {
                            $('#city').val(oldCity);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error loading cities:', error);
                        $('#city').html('<option value="">Error loading cities</option>').prop('disabled', false);
                        showAlert('Failed to load cities. Please try again.', 'danger');
                    }
                });
            } else {
                $('#city').prop('disabled', false);
            }
        });

        // Form submission handler
        $('#branchEditForm').on('submit', function(e) {
            e.preventDefault();

            const submitBtn = $('#submitBtn');
            const originalText = submitBtn.html();
            
            // Disable submit button and show loading
            submitBtn.prop('disabled', true).html('<span class="loading-spinner me-2"></span>Updating...');

            // Clear previous alerts and validation
            $('.alert').remove();
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();

            // Prepare form data
            const formData = $(this).serialize();

            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: formData,
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        showAlert(response.message, 'success');
                        
                        // Redirect after success
                        setTimeout(function() {
                            window.location.href = "{{ route('branch.index') }}";
                        }, 2000);
                    } else {
                        showAlert(response.message || 'An error occurred', 'danger');
                        submitBtn.prop('disabled', false).html(originalText);
                    }
                },
                error: function(xhr) {
                    submitBtn.prop('disabled', false).html(originalText);

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

                        // Scroll to first error
                        $('html, body').animate({
                            scrollTop: $('.is-invalid').first().offset().top - 100
                        }, 500);

                        showAlert('Please fix the validation errors below', 'danger');
                    } else {
                        showAlert(xhr.responseJSON?.message || 'An error occurred while updating the branch', 'danger');
                    }
                }
            });
        });

        // Phone number validation
        $('input[name="branch_contact_phone"]').on('input', function() {
            this.value = this.value.replace(/[^0-9]/g, '').substring(0, 10);
        });

        // Clear validation on input
        $('input, select, textarea').on('input change', function() {
            $(this).removeClass('is-invalid');
            $(this).next('.invalid-feedback').remove();
        });

        // Reset form function
        window.resetForm = function() {
            if (confirm('Are you sure you want to reset the form? All changes will be lost.')) {
                document.getElementById('branchEditForm').reset();
                
                // Reset dynamic dropdowns
                $('#country').trigger('change');
                
                // Clear validation
                $('.is-invalid').removeClass('is-invalid');
                $('.invalid-feedback').remove();
                $('.alert').remove();
            }
        }

        // Show alert function
        function showAlert(message, type) {
            const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
            const alertHtml = `
                <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            `;
            $('.card-body').prepend(alertHtml);
            
            // Auto dismiss success alerts after 5 seconds
            if (type === 'success') {
                setTimeout(function() {
                    $('.alert-success').alert('close');
                }, 5000);
            }
        }

        // Trigger country change on page load to load states and cities
        @if($oldCountry)
            $('#country').trigger('change');
        @endif
    });
</script>
@endsection