@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>
        .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;
            background: #e8f5e9;
        }

        .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-item.completed .step-icon {
            background: #4caf50;
            color: white;
        }

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

        .step-badge.completed {
            background: #4caf50;
            color: white;
        }

        .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;
            color: #111827;
        }

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

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

        .btn-update {
            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-update:hover {
            background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%);
            color: white;
        }

        .btn-cancel {
            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;
            text-decoration: none;
        }

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

        .branch-info-card {
            background: #f8fafc;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .branch-info-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }

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

        .branch-info-value {
            font-weight: 600;
            color: #374151;
        }
    </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">Editing</span></h6>
                        <p>Update branch information and contact details</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>Manage team members working in this branch</p>
                    </div>
                </div>
            </div>

            <!-- Branch Information Card -->
            <div class="branch-info-card mt-4">
                <h6 class="mb-3">Current Information</h6>
                <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 bg-{{ $branch->status == 'active' ? 'success' : 'secondary' }}">
                            {{ ucfirst($branch->status) }}
                        </span>
                    </span>
                </div>
                <div class="branch-info-item">
                    <span class="branch-info-label">Created:</span>
                    <span class="branch-info-value">{{ $branch->created_at->format('M d, Y') }}</span>
                </div>
                <div class="branch-info-item">
                    <span class="branch-info-label">Reservations:</span>
                    <span class="branch-info-value">
                        <span class="badge bg-{{ $branch->reservation_enabled ? 'success' : 'secondary' }}">
                            {{ $branch->reservation_enabled ? 'Enabled' : 'Disabled' }}
                        </span>
                    </span>
                </div>
            </div>
        </div>

        <!-- Main Form -->
        <div class="col-lg-9">
            <form id="branchEditForm" method="POST">
                @csrf
                @method('PUT')
                <input type="hidden" name="branch_id" value="{{ $branch->id }}">

                <div class="form-section">
                    <h4>Edit Branch - {{ $branch->branch_name }}</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', $branch->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', $branch->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</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 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', $branch->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', $branch->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', $branch->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>

                    <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', $branch->reservation_enabled) ? '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">
                        <a href="{{ route('branch.index') }}" class="btn-cancel">
                            <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>
                            Cancel
                        </a>
                        <button type="submit" class="btn-update">
                            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"/>
                            </svg>
                            Update Branch
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

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

            if (countryID) {
                $('#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) {
                        $('#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>');
                            });
                        }
                        
                        $('#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="">-- 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();
            
            $('#city').html('<option value="">-- Select City --</option>');

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

                $.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>');
                            });
                        }
                        
                        $('#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="">-- Select City --</option>');
                        $('#city').prop('disabled', false);
                        alert('Failed to load cities. Please try again.');
                    }
                });
            } else {
                $('#city').prop('disabled', false);
            }
        });

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

            const reservationsCheckbox = $('#reservations');
            if (!reservationsCheckbox.is(':checked')) {
                $('input[type="hidden"][name="reservations"][value="0"]').remove();
                $('<input>').attr({
                    type: 'hidden',
                    name: 'reservations',
                    value: '0'
                }).appendTo('#branchEditForm');
            } 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 class="spinner-border spinner-border-sm me-2"></span>Updating...</span>');

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

            $.ajax({
                url: "{{ route('branch.update', $branch->id) }}",
                type: "POST",
                data: formData,
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        // Show success message
                        const successAlert = `
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <strong>✓ Success!</strong> ${response.message}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        `;
                        $('.form-section').prepend(successAlert);

                        // Redirect after short delay
                        setTimeout(function() {
                            if (response.redirect_url) {
                                window.location.href = response.redirect_url;
                            } else {
                                window.location.href = "{{ route('branch.index') }}";
                            }
                        }, 1500);
                    }
                },
                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();
        });

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