@extends('layouts.app')

@section('content')
<div class="page-wrapper">

    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">{{ trans('lang.local_favorites_edit') }}</h3>
        </div>
        <div class="col-md-7 align-self-center">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">{{ trans('lang.dashboard') }}</a></li>
                <li class="breadcrumb-item"><a href="{{ route('local_favorites.index') }}">{{ trans('lang.local_favorites') }}</a></li>
                <li class="breadcrumb-item active">{{ trans('lang.local_favorites_edit') }}</li>
            </ol>
        </div>
    </div>

    <div class="container-fluid">
        <div class="cat-edite-page max-width-box">
            <form action="{{ route('local_favorites.update', $favorite->id) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="card pb-4">

                    <div class="card-header">
                        <ul class="nav nav-tabs align-items-end card-header-tabs w-100">
                            <li role="presentation" class="nav-item">
                                <a href="#local_favorite_information" aria-controls="local_favorite_information" role="tab"
                                   data-toggle="tab" class="nav-link active">{{ trans('lang.local_favorites_information') }}</a>
                            </li>
                        </ul>
                    </div>

                    <div class="card-body">
                        @include('alerts.error_messages')

                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane row restaurant_payout_create active" id="local_favorite_information">
                                <fieldset>
                                    <legend>{{ trans('lang.local_favorites_edit') }}</legend>

                                    {{-- Store --}}
                                    <div class="form-group row width-100">
                                        <label class="col-3 control-label">{{ trans('lang.store') }}</label>
                                        <div class="col-7">
                                            <select name="store_id" id="store_id" class="form-control select2" required>
                                                <option value="">{{ trans('lang.select_store') }}</option>
                                                @foreach ($stores as $store)
                                                    <option value="{{ $store->id }}" 
                                                        {{ $favorite->store_id == $store->id ? 'selected' : '' }}>
                                                        {{ $store->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <div class="form-text text-muted">{{ trans('lang.local_favorites_store_help') }}</div>
                                        </div>
                                    </div>

                                    {{-- Display Order --}}
                                    <div class="form-group row width-100">
                                        <label class="col-3 control-label">{{ trans('lang.display_order') }}</label>
                                        <div class="col-7">
                                            <input type="number" name="display_order" id="display_order" class="form-control"
                                                   value="{{ $favorite->display_order }}" required>
                                        </div>
                                    </div>

                                </fieldset>
                            </div>
                        </div>

                        {{-- Save & Cancel --}}
                        <div class="form-group col-12 text-center btm-btn mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-save"></i> {{ trans('lang.save') }}
                            </button>
                            <a href="{{ route('local_favorites.index') }}" class="btn btn-secondary">
                                <i class="fa fa-undo"></i> {{ trans('lang.cancel') }}
                            </a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection

@section('scripts')
<!-- Select2 -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function () {
    $('#store_id').select2({
        placeholder: "{{ trans('lang.select_store') }}",
        width: '100%'
    });

    // AJAX: Update display order when store changes
    $('#store_id').on('change', function() {
        var storeId = $(this).val();
        if(storeId){
            $.ajax({
                url: '{{ route("local_favorites.getDisplayOrder") }}',
                type: 'GET',
                data: { store_id: storeId },
                success: function(data){
                    $('#display_order').val(data.next_order);
                }
            });
        } else {
            $('#display_order').val('');
        }
    });
});
</script>
@endsection