@extends('admin.templates.layout')
@section('head')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
@endsection
@section('content')
<div class="row">
    <div class="col-lg-12">
        <form id="bannerForm" method="POST" action="{{ route('admin.banners.store') }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="id" value="{{ $id ?? '' }}">

            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Banner Details</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Title</label>
                            <input type="text" class="form-control" name="title" value="{{ $banner->title ?? '' }}" placeholder="Enter title">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Subtitle</label>
                            <input type="text" class="form-control" name="subtitle" value="{{ $banner->subtitle ?? '' }}" placeholder="Enter subtitle">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Tagline</label>
                            <input type="text" class="form-control" name="tagline" value="{{ $banner->tagline ?? '' }}" placeholder="Enter tagline">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Image @if(!$id)<span class="text-danger">*</span>@endif</label>
                            <input type="file" class="form-control" name="image" accept="image/*" @if(!$id) required @endif>
                            @if($banner && $banner->image)
                                <div class="mt-2">
                                    <img src="{{ $banner->image_url }}" alt="Banner" width="150" class="img-thumbnail">
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Link Configuration</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Link Type <span class="text-danger">*</span></label>
                            <select class="form-select" name="link_type" id="link_type" required>
                                <option value="external" {{ ($banner->link_type ?? '') == 'external' ? 'selected' : '' }}>External URL</option>
                                <option value="voucher" {{ ($banner->link_type ?? '') == 'voucher' ? 'selected' : '' }}>Voucher</option>
                                <option value="vendor" {{ ($banner->link_type ?? '') == 'vendor' ? 'selected' : '' }}>Vendor</option>
                            </select>
                        </div>

                        <div class="col-md-8 mb-3" id="external_url_wrapper">
                            <label class="form-label">URL <span class="text-danger">*</span></label>
                            <input type="url" class="form-control" name="external_url" value="{{ $banner->external_url ?? '' }}" placeholder="https://example.com">
                        </div>

                        <div class="col-md-8 mb-3" id="voucher_wrapper" style="display: none;">
                            <label class="form-label">Select Voucher <span class="text-danger">*</span></label>
                            <select class="form-select select2" name="voucher_id">
                                <option value="">Select Voucher</option>
                                @foreach($vouchers as $voucher)
                                    <option value="{{ $voucher->id }}" {{ ($banner->voucher_id ?? '') == $voucher->id ? 'selected' : '' }}>{{ $voucher->title }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-8 mb-3" id="vendor_wrapper" style="display: none;">
                            <label class="form-label">Select Vendor <span class="text-danger">*</span></label>
                            <select class="form-select select2" name="vendor_detail_id">
                                <option value="">Select Vendor</option>
                                @foreach($vendors as $vendor)
                                    <option value="{{ $vendor->id }}" {{ ($banner->vendor_detail_id ?? '') == $vendor->id ? 'selected' : '' }}>{{ $vendor->business_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Settings</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Sort Order</label>
                            <input type="number" class="form-control" name="sort_order" value="{{ $banner->sort_order ?? 0 }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Status</label>
                            <div class="form-check form-switch mt-1">
                                <input class="form-check-input" type="checkbox" name="status" value="1" {{ ($banner->status ?? 1) ? 'checked' : '' }}>
                                <label class="form-check-label">Active</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-end gap-2 mb-4">
                <button type="button" class="btn btn-dark w-sm" onclick="history.back()">Back</button>
                <button type="submit" class="btn btn-primary w-sm" id="submitButton">Submit</button>
            </div>
        </form>
    </div>
</div>
@stop

@section('script')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script>
    $(document).ready(function() {
        $('.select2').select2({
            theme: 'bootstrap-5'
        });

        function toggleLinkFields() {
            var type = $('#link_type').val();
            $('#external_url_wrapper, #voucher_wrapper, #vendor_wrapper').hide();
            
            if (type === 'external') {
                $('#external_url_wrapper').show();
            } else if (type === 'voucher') {
                $('#voucher_wrapper').show();
            } else if (type === 'vendor') {
                $('#vendor_wrapper').show();
            }
        }

        $('#link_type').on('change', toggleLinkFields);
        toggleLinkFields();

        $('#bannerForm').validate({
            rules: {
                link_type: { required: true },
                external_url: { required: function() { return $('#link_type').val() === 'external'; }, url: true },
                voucher_id: { required: function() { return $('#link_type').val() === 'voucher'; } },
                vendor_detail_id: { required: function() { return $('#link_type').val() === 'vendor'; } }
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.mb-3').append(error);
            },
            highlight: function (element) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element) {
                $(element).removeClass('is-invalid');
            }
        });

        $('#bannerForm').on('submit', function(e) {
            e.preventDefault();
            if (!$(this).valid()) return;

            var formData = new FormData(this);
            $('#submitButton').prop('disabled', true).text('Saving...');

            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.status === 'success') {
                        Swal.fire({
                            text: response.message,
                            iconHtml: '<img src="{{asset('/')}}admin_assets/assets/images/tick.svg" class="img-fluid">',
                            timer: 3000,
                            timerProgressBar: true,
                            showConfirmButton: false
                        }).then(() => {
                            window.location.href = '{{ route("admin.banners") }}';
                        });
                    } else {
                        Swal.fire({ text: response.message, icon: 'error' });
                        $('#submitButton').prop('disabled', false).text('Submit');
                    }
                },
                error: function(xhr) {
                    $('#submitButton').prop('disabled', false).text('Submit');
                    var errors = xhr.responseJSON?.errors;
                    if (errors) {
                        var errorMsg = Object.values(errors).flat().join('<br>');
                        Swal.fire({ html: errorMsg, icon: 'error' });
                    }
                }
            });
        });
    });
</script>
@stop