@extends('dashboard.layout.content')

@section('customTitle')
    {{ __('general.edit_car') }}
@endsection

@section('customStyle')
    <link href='{{ asset("dashboard/$locale/assets/css/elements/alert.css") }}' rel="stylesheet" type="text/css" />
@endsection

@section('customBody')
    <div id="content" class="main-content">
        <div class="container">
            <div class="container">
                <div class="row">
                    <div id="flStackForm" class="col-12 layout-spacing layout-top-spacing">
                        <div class="statbox widget box box-shadow">
                            <div class="widget-header">
                                <div class="row">
                                    <div class="col-12">
                                        <h4>{{ __('general.edit_car') }} : ({{ $model->ar_name }})</h4>
                                    </div>

                                    <div class="col-md-6 m-auto text-center">
                                        <img src="{{ $model->image }}" class="img-fluid mt-2" width="70%" />
                                    </div>

                                </div>
                            </div>
                            <div class="widget-content widget-content-area">
                                <form class="uroad-form"
                                    action="{{ route('dashboard.models.update', ['model' => $model->id]) }}" method="POST"
                                    enctype="multipart/form-data">
                                    @method('PATCH')
                                    @csrf
                                    <div class="form-row mb-4">

                                        <div class="form-group col-md-4">
                                            <label for="category">{{ __('validation.attributes.category') }}</label>
                                            <select required id="category" class="form-control basic" name="category_id">
                                                @foreach ($categories as $category)
                                                    <option {{ $model->category_id === $category->id ? 'selected' : '' }}
                                                        value="{{ $category->id }}">
                                                        {{ $category->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="form-group col-md-4">
                                            <label for="brand">{{ __('validation.attributes.brand') }}</label>
                                            <select required id="brand" class="form-control " name="brand_id">
                                                <option value="{{ $model->brand_id }}" selected>
                                                    {{ $model->brand->name }}
                                                </option>
                                            </select>
                                        </div>

                                        <div class="form-group col-md-4">
                                            <label
                                                for="image">{{ __('validation.attributes.image') . ' (' . __('general.optional') }})</label>
                                            <input type="file" accept="image/*" class="form-control" id="image"
                                                placeholder="{{ __('validation.attributes.image') }}" name="image">
                                            <small class="form-text text-muted">{{ __('general.allowed_files') }}
                                                png,jpg,jpeg</small>
                                        </div>

                                        <div class="form-group col-md-4">
                                            <label for="ar_name">{{ __('validation.attributes.ar_name') }}</label>
                                            <input required type="text" class="form-control" id="ar_name"
                                                placeholder="{{ __('validation.attributes.ar_name') }}" name="ar_name"
                                                value="{{ $model->ar_name }}">
                                        </div>

                                        <div class="form-group col-md-4">
                                            <label for="en_name">{{ __('validation.attributes.en_name') }}</label>
                                            <input required type="text" class="form-control" id="en_name"
                                                placeholder="{{ __('validation.attributes.en_name') }}" name="en_name"
                                                value="{{ $model->en_name }}">
                                        </div>

                                        <div class="form-group col-md-4">
                                            <label for="size">{{ __('validation.attributes.size') }}</label>
                                            <select required id="size" class="form-control basic" name="size">
                                                <option value="small:صغير">{{ __('validation.attributes.small') }}</option>
                                                <option value="medium:متوسط">{{ __('validation.attributes.medium') }}
                                                </option>
                                                <option value="big:كبير">{{ __('validation.attributes.big') }}</option>
                                            </select>
                                        </div>

                                        <div class="form-group col-md-4">
                                            <label for="seats">{{ __('validation.attributes.seats') }}</label>
                                            <input required type="number" class="form-control" id="seats"
                                                placeholder="{{ __('validation.attributes.seats') }}" name="seats"
                                                value="{{ $model->seats }}">
                                        </div>

                                        <div class="form-group col-md-4">
                                            <label
                                                for="is_recommended">{{ __('validation.attributes.is_recommended') }}</label>
                                            <select required id="is_recommended" class="form-control basic"
                                                name="is_recommended">
                                                <option {{ $model->is_recommended == '0' ? 'selected' : '' }}
                                                    value="0">{{ __('general.not_recommended') }}</option>
                                                <option {{ $model->is_recommended == '1' ? 'selected' : '' }}
                                                    value="1">{{ __('dashboard.Recomended') }}</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="mt-3 mb-3">
                                        <button type="button" class="btn btn-info add-image">
                                            <i class="las la-check-circle"></i>
                                            {{ __('general.add_more_images') }}
                                        </button>
                                    </div>

                                    <div class="car-images-container d-none">

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="model">{{ __('validation.attributes.model') }}</label>
                                                <input type="number" class="form-control" id="model" placeholder="{{ __('validation.attributes.model') }}" name="model_image[][model]" value="" disabled>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="image">{{ __('validation.attributes.image') }}</label>
                                                <input type="file" class="form-control" id="image" placeholder="{{ __('validation.attributes.image') }}" name="model_image[][image]" value="" disabled>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>{{ __('general.options') }}</label>
                                                <div>
                                                    <button type="button" class="btn btn-danger delete-image">@lang('general.delete')</button>    
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </div> 
    
                                    <table id="carsTable" class="table table-hover text-center">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>{{ __('validation.attributes.image') }}</th>
                                                <th>{{ __('validation.attributes.model') }}</th>
                                                <th>{{ __('general.options') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($modelsImages as $image)
                                                <tr>
                                                    <th>{{ $loop->first + 1 }}</th>
                                                    <th><img src="{{ $image->image }}" width="50" /></th>
                                                    <th>{{ $image->model }}</th>
                                                    <th>
                                                        <a href="{{ route('dashboard.models_images.delete', ['models_image' => $image->id]) }}"
                                                            class="" data-toggle="tooltip" data-placement="top"
                                                            data-original-title="حذف">
                                                            <i class="las la-trash text-danger"></i>
                                                        </a>
                                                    </th>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th>#</th>
                                                <th>{{ __('validation.attributes.image') }}</th>
                                                <th>{{ __('validation.attributes.model') }}</th>
                                                <th>{{ __('general.options') }}</th>
                                            </tr>
                                        </tfoot>
                                    </table>

                                    <div class="row images-generated"></div>

                                    <input type="submit" class="btn btn-primary mt-3"
                                        value="{{ __('general.submit') }}">
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('customScript')
    <script>
        $("#cars-menu-box").attr("data-active", "true");
        ajaxSelect2('#brand', '/dashboard/select2/brands')


        $(document).on('click', '.add-image', function() {
            // Find the closest car-images-container section
            let carImagesSection = $('.car-images-container:first');
            let imagesGenerated = $('.images-generated');

            // Clone the car-images-container section
            let clonedSection = carImagesSection.clone();

            clonedSection.removeClass('d-none');
            clonedSection.addClass('d-flex flex-column flex-md-row w-100');

            // Clear input values in the cloned section
            clonedSection.find('input').each(function() {
                $(this).val(''); // Clear the value
                $(this).prop('files', null); // Clear file inputs
                $(this).prop('disabled', false); // Clear disabled
            });

            // Append the cloned section after the current car-images-container section
            imagesGenerated.append(clonedSection);
        });

        $(document).on('click', '.delete-image', function() {
            // Find the closest car-images-container section and remove it
            let carImagesSection = $(this).closest('.car-images-container');

            // Remove the car-images-container section
            carImagesSection.remove();
        });
    </script>
@endsection