@extends('admin.layouts.app')

@section('title', ($record ? 'Edit' : 'Add') . ' Slider')

@section('content')
    <div class="page-header-breadcrumb my-2">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
            <h1 class="page-title fw-medium fs-20 mb-0">{{ $record ? 'Edit' : 'Add' }} Slider</h1>
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.sliders.index') }}">Sliders</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $record ? 'Edit' : 'Add' }}</li>
            </ol>
        </div>
    </div>

    <div class="container-fluid page-container main-body-container">
        <form method="POST" action="{{ $action }}" enctype="multipart/form-data">
            @csrf
            @if ($method === 'PUT')
                @method('PUT')
            @endif

            <div class="row">
                <div class="col-xl-12">
                    <div class="card custom-card mb-3">
                        <div class="card-header"><div class="card-title">Slider details</div></div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="field-name" class="form-label fs-14 text-dark">Slider name <span class="text-danger">*</span></label>
                                <input type="text" id="field-name" name="name" value="{{ old('name', $record?->name) }}" class="form-control" required>
                            </div>

                            <div class="mb-3">
                                <label for="field-location" class="form-label fs-14 text-dark">Location</label>
                                <select id="field-location" name="location" class="form-select">
                                    <option value="home-hero" @selected(old('location', $record?->location) === 'home-hero')>Home hero</option>
                                    <option value="inner-hero" @selected(old('location', $record?->location) === 'inner-hero')>Inner pages hero</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="field-autoplay_ms" class="form-label fs-14 text-dark">Autoplay (ms)</label>
                                <input type="number" id="field-autoplay_ms" name="autoplay_ms" value="{{ old('autoplay_ms', $record?->autoplay_ms ?? 5000) }}" class="form-control">
                            </div>

                            <div class="form-check form-switch">
                                <input type="hidden" name="is_active" value="0">
                                <input class="form-check-input" type="checkbox" role="switch" name="is_active" id="field-is_active" value="1" @checked(old('is_active', $record?->is_active ?? true))>
                                <label class="form-check-label" for="field-is_active">Active</label>
                            </div>
                        </div>
                    </div>

                    <div class="card custom-card">
                        <div class="card-header justify-content-between">
                            <div class="card-title">Slides</div>
                            <button type="button" class="btn btn-sm btn-primary" data-slide-add>
                                <i class="ri-add-line me-1"></i>Add slide
                            </button>
                        </div>
                        <div class="card-body">
                            <div class="d-flex flex-column gap-3" data-slide-list>
                                @foreach ($slides as $index => $slide)
                                    <div class="card" data-slide-item>
                                        <div class="card-body">
                                            <input type="hidden" name="slides[{{ $index }}][id]" value="{{ $slide->id }}">
                                            <div class="mb-2">
                                                <label class="form-label fs-14 text-dark">Image</label>
                                                <input type="file" name="slides[{{ $index }}][image]" class="form-control">
                                                @if ($slide->image_path)
                                                    <img src="{{ Storage::disk('public')->url($slide->image_path) }}" alt="" class="rounded mt-2" style="max-height: 90px;">
                                                @endif
                                            </div>
                                            <div class="mb-2">
                                                <label class="form-label fs-14 text-dark">Title</label>
                                                <input type="text" name="slides[{{ $index }}][title]" value="{{ $slide->title }}" class="form-control">
                                            </div>
                                            <div class="mb-2">
                                                <label class="form-label fs-14 text-dark">Subtitle</label>
                                                <textarea name="slides[{{ $index }}][subtitle]" rows="2" class="form-control">{{ $slide->subtitle }}</textarea>
                                            </div>
                                            <div class="row g-2">
                                                <div class="col-md-6">
                                                    <label class="form-label fs-14 text-dark">Button label</label>
                                                    <input type="text" name="slides[{{ $index }}][cta_label]" value="{{ $slide->cta_label }}" class="form-control">
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="form-label fs-14 text-dark">Button URL</label>
                                                    <input type="text" name="slides[{{ $index }}][cta_url]" value="{{ $slide->cta_url }}" class="form-control">
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <div class="form-check form-switch mb-0">
                                                    <input type="hidden" name="slides[{{ $index }}][is_active]" value="0">
                                                    <input class="form-check-input" type="checkbox" role="switch" name="slides[{{ $index }}][is_active]" value="1" @checked($slide->is_active)>
                                                    <label class="form-check-label">Active</label>
                                                </div>
                                                <button type="button" class="btn btn-sm btn-outline-danger" data-slide-remove>
                                                    <i class="ri-delete-bin-line"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="card-footer d-flex justify-content-end gap-2">
                            <a href="{{ route('admin.sliders.index') }}" class="btn btn-outline-secondary">Cancel</a>
                            <button type="submit" class="btn btn-primary"><i class="ri-save-line me-1"></i>Save slider</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/js/admin-slides.js') }}"></script>
@endpush