@extends('admin.layout.master')
@section('title', __('admin.sliders'))
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <div class="col-md-12">
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">{{ __('admin.sliders') }}</h5>
                        @permission('slider-create')
                        <button data-bs-toggle="modal" data-bs-target="#addSliderModal" class="btn btn-primary">
                            {{ __('admin.add_slider') }}
                        </button>
                        @endpermission
                    </div>

                    <div class="card-body">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>{{ __('admin.image') }}</th>
                                <th>{{ __('admin.service') }}</th>
                                <th>{{ __('admin.link') }}</th>
                                <th>{{ __('admin.action') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach ($sliders as $slider)
                                <tr>
                                    <td><img src="{{ $slider->image }}" width="80"></td>
                                    <td>{{ $slider->service ?? '-' }}</td>
                                    <td>{{ $slider->link ?? '-' }}</td>
                                    <td>
                                        @permission('slider-update')
                                        <button class="btn btn-sm btn-primary" data-bs-toggle="modal"
                                                data-bs-target="#editSliderModal{{ $slider->id }}">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        @endpermission

                                        @permission('slider-delete')
                                        <form action="{{ route('admin.slider.destroy', $slider->id) }}" method="POST"
                                              class="d-inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger ">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </form>
                                        @endpermission
                                    </td>
                                </tr>

                                <!-- Edit Modal -->
                                <div class="modal fade" id="editSliderModal{{ $slider->id }}" tabindex="-1"
                                     aria-labelledby="editSliderModalLabel{{ $slider->id }}" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">{{ __('admin.edit_slider') }}</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                            </div>
                                            <form action="{{ route('admin.slider.update', $slider->id) }}" method="POST" enctype="multipart/form-data">
                                                @csrf
                                                @method('PUT')
                                                <div class="modal-body">
                                                    <div class="mb-3">
                                                        <label class="form-label">{{ __('admin.image') }}</label>
                                                        <input type="file" name="image" id="image" class="form-control">
                                                        @error('image')
                                                        <div class="alert alert-danger mt-1">{{ $message }}</div>
                                                        @enderror
                                                        <div class="mt-2">
                                                            <img class="img-fluid" id="img-preview" src="{{ $slider->image }}" width="80">
                                                        </div>
                                                    </div>

                                                    <div class="mb-3">
                                                        <label class="form-label">{{ __('admin.type') }}</label>
                                                        <select class="form-select type-select" name="type" data-id="{{ $slider->id }}">
                                                            <option value="service" {{ $slider->service ? 'selected' : '' }}>
                                                                {{ __('admin.service') }}
                                                            </option>
                                                            <option value="link" {{ $slider->link ? 'selected' : '' }}>
                                                                {{ __('admin.link') }}
                                                            </option>
                                                        </select>
                                                    </div>

                                                    <div class="mb-3 service-field" id="serviceField-{{ $slider->id }}">
                                                        <label class="form-label">{{ __('admin.choose_service') }}</label>
                                                        <select class="form-select" name="service">
                                                            <option value="">-- {{ __('admin.select') }} --</option>
                                                            <option value="cv" {{ $slider->service === 'cv' ? 'selected' : '' }}>CV</option>
                                                            <option value="evaluation" {{ $slider->service === 'evaluation' ? 'selected' : '' }}>Evaluation</option>
                                                            <option value="company" {{ $slider->service === 'company' ? 'selected' : '' }}>Company</option>
                                                            <option value="support" {{ $slider->service === 'support' ? 'selected' : '' }}>Support</option>
                                                        </select>
                                                    </div>

                                                    <div class="mb-3 link-field d-none" id="linkField-{{ $slider->id }}">
                                                        <label class="form-label">{{ __('admin.link') }}</label>
                                                        <input type="url" name="link" class="form-control" value="{{ $slider->link }}">
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="submit" class="btn btn-primary">{{ __('admin.save') }}</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            </tbody>
                        </table>

                        <div class="card-footer">
                            {{ $sliders->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Modal -->
    <div class="modal fade" id="addSliderModal" tabindex="-1" aria-labelledby="addSliderModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('admin.add_slider') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <form action="{{ route('admin.slider.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">{{ __('admin.image') }}</label>
                            <input type="file" name="image" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('admin.type') }}</label>
                            <select class="form-select" id="createTypeSelect" name="type">
                                <option value="service" selected>{{ __('admin.service') }}</option>
                                <option value="link">{{ __('admin.link') }}</option>
                            </select>
                        </div>

                        <div class="mb-3" id="createServiceField">
                            <label class="form-label">{{ __('admin.choose_service') }}</label>
                            <select class="form-select" name="service">
                                <option value="">-- {{ __('admin.select') }} --</option>
                                <option value="cv">CV</option>
                                <option value="evaluation">Evaluation</option>
                                <option value="company">Company</option>
                                <option value="support">Support</option>
                            </select>
                        </div>

                        <div class="mb-3 d-none" id="createLinkField">
                            <label class="form-label">{{ __('admin.link') }}</label>
                            <input type="url" name="link" class="form-control" value="{{ old('link') }}">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">{{ __('admin.save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function toggleFields(idPrefix, selectedValue) {
            const serviceField = document.getElementById(`serviceField-${idPrefix}`);
            const linkField = document.getElementById(`linkField-${idPrefix}`);

            if (selectedValue === 'service') {
                serviceField?.classList.remove('d-none');
                linkField?.classList.add('d-none');
            } else {
                serviceField?.classList.add('d-none');
                linkField?.classList.remove('d-none');
            }
        }

        document.addEventListener('DOMContentLoaded', function () {
            // Add Modal
            const createType = document.getElementById('createTypeSelect');
            const createServiceField = document.getElementById('createServiceField');
            const createLinkField = document.getElementById('createLinkField');

            createType.addEventListener('change', function () {
                if (this.value === 'service') {
                    createServiceField.classList.remove('d-none');
                    createLinkField.classList.add('d-none');
                } else {
                    createServiceField.classList.add('d-none');
                    createLinkField.classList.remove('d-none');
                }
            });

            // Edit Modals
            document.querySelectorAll('.type-select').forEach(function (select) {
                const id = select.dataset.id;
                select.addEventListener('change', function () {
                    toggleFields(id, this.value);
                });
                toggleFields(id, select.value); // initialize on load
            });
        });
    </script>
    <script>
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#img-preview').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#image").change(function () {
            readURL(this);
        })
    </script>
@endsection