@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="voucherForm" method="POST" action="{{ route('admin.vouchers.store') }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="id" value="{{ $id ?? '' }}">

            <!-- Voucher Details Card -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Voucher Details</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Vendor <span class="text-danger">*</span></label>
                            <select class="form-control" name="vendor_detail_id" id="vendor_select" required>
                                @if($voucher && $voucher->vendorDetail)
                                    <option value="{{ $voucher->vendor_detail_id }}" selected>
                                        {{ $voucher->vendorDetail->business_name }} ({{ $voucher->vendorDetail->user->name ?? 'N/A' }})
                                    </option>
                                @endif
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label" for="image">Image</label>
                            <input type="file" class="form-control" id="image" name="image" accept="image/*">
                            @if($voucher && $voucher->image_url)
                                <div class="mt-2">
                                    <img src="{{ $voucher->image_url }}" alt="Voucher Image" width="100" class="img-thumbnail">
                                </div>
                            @endif
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Title <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="title" value="{{ $voucher->title ?? '' }}" required placeholder="e.g. 20% Off on All Items">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label class="form-label">Description <span class="text-danger">*</span></label>
                            <textarea class="form-control" name="description" rows="3" required placeholder="Describe the voucher offer...">{{ $voucher->description ?? '' }}</textarea>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label class="form-label">Terms & Conditions <span class="text-danger">*</span></label>
                            <textarea class="form-control" name="terms_and_conditions" rows="3" required placeholder="Enter terms and conditions...">{{ $voucher->terms_and_conditions ?? '' }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Offer Configuration Card -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Offer Configuration</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Offer Type <span class="text-danger">*</span></label>
                            <select class="form-control" name="offer_type" id="offer_type" required>
                                <option value="">Select Offer Type</option>
                                <option value="percentage" {{ ($voucher->offer_type ?? '') == 'percentage' ? 'selected' : '' }}>Percentage Discount</option>
                                <option value="fixed" {{ ($voucher->offer_type ?? '') == 'fixed' ? 'selected' : '' }}>Fixed Amount Discount</option>
                                <option value="buy_one_get_one" {{ ($voucher->offer_type ?? '') == 'buy_one_get_one' ? 'selected' : '' }}>Buy One Get One</option>
                                <option value="buy_two_get_one" {{ ($voucher->offer_type ?? '') == 'buy_two_get_one' ? 'selected' : '' }}>Buy Two Get One</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3" id="discount_value_wrapper" style="display: none;">
                            <label class="form-label">Discount Value <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" name="discount_value" id="discount_value" value="{{ $voucher->discount_value ?? '' }}" step="0.01" min="0" placeholder="Enter discount value">
                            <small class="text-muted" id="discount_hint"></small>
                        </div>
                        <div class="col-md-6 mb-3" id="per_piece_price_wrapper" style="display: none;">
                            <label class="form-label">Per Piece Price <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" name="per_piece_price" id="per_piece_price" value="{{ $voucher->per_piece_price ?? '' }}" step="0.01" min="0" placeholder="Enter per piece price">
                            <small class="text-muted">Enter the price per piece for BOGO/BTGO offers</small>
                        </div>

                        <div class="col-md-12 mb-3">
                            <label class="form-label">Branches</label>
                            <select class="form-control branches-select" name="branch_ids[]" id="branch_select" multiple="multiple">
                                @foreach($branches as $branch)
                                    <option value="{{ $branch->id }}" {{ in_array($branch->id, $selected_branches) ? 'selected' : '' }}>
                                        {{ $branch->name }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted">If no branches selected, voucher will be valid for all branches</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Availability & Expiry Card -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Availability & Expiry</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Total Count</label>
                            <input type="number" class="form-control" name="total_count" value="{{ $voucher->total_count ?? '' }}" min="1" placeholder="Leave empty for unlimited">
                            <small class="text-muted">Leave empty for unlimited vouchers</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Expiry Date</label>
                            <input type="date" class="form-control" name="expiry_date" value="{{ $voucher && $voucher->expiry_date ? $voucher->expiry_date->format('Y-m-d') : '' }}" min="{{ date('Y-m-d', strtotime('+1 day')) }}">
                            <small class="text-muted">Leave empty for no expiry</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Status</label>
                            <div class="d-flex gap-4 mt-1">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="status" value="1" {{ ($voucher->status ?? 1) ? 'checked' : '' }}>
                                    <label class="form-check-label">Active</label>
                                </div>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="is_trending" value="1" {{ ($voucher->is_trending ?? 0) ? 'checked' : '' }}>
                                    <label class="form-check-label">Trending</label>
                                </div>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="is_featured" value="1" {{ ($voucher->is_featured ?? 0) ? 'checked' : '' }}>
                                    <label class="form-check-label">Featured</label>
                                </div>
                            </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() {
        // Initialize Select2 for vendor with AJAX
        $('#vendor_select').select2({
            theme: 'bootstrap-5',
            placeholder: 'Search vendor...',
            allowClear: true,
            ajax: {
                url: '{{ route("admin.vouchers.search_vendors") }}',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.results
                    };
                },
                cache: true
            }
        });

        // Initialize Select2 for categories & branches
        $('.categories-select, .branches-select').select2({
            theme: 'bootstrap-5',
            placeholder: $(this).hasClass('categories-select') ? 'Select categories' : 'Select branches',
            allowClear: true
        });

        // Handle vendor selection change - load vendor's categories and branches
        $('#vendor_select').on('change', function() {
            var vendorId = $(this).val();
            var categorySelect = $('#category_select');
            var branchSelect = $('#branch_select');
            
            if (!vendorId) {
                categorySelect.empty().trigger('change');
                branchSelect.empty().trigger('change');
                return;
            }

            // Show loading state
            categorySelect.prop('disabled', true);
            branchSelect.prop('disabled', true);
            


            // Fetch Branches
            $.ajax({
                url: '{{ route("admin.vouchers.vendor_branches") }}',
                type: 'GET',
                data: { vendor_id: vendorId },
                dataType: 'json',
                success: function(response) {
                    branchSelect.empty();
                    if (response.branches && response.branches.length > 0) {
                        response.branches.forEach(function(branch) {
                            branchSelect.append(new Option(branch.name, branch.id, false, false));
                        });
                    }
                    branchSelect.prop('disabled', false).trigger('change');
                },
                error: function() {
                    branchSelect.prop('disabled', false);
                    Swal.fire({
                        text: 'Failed to load branches. Please try again.',
                        iconHtml: '<img src="{{asset('/')}}admin_assets/assets/images/close.svg" class="img-fluid">',
                        icon: 'error'
                    });
                }
            });
        });

        // Handle offer type change
        function toggleDiscountField() {
            var offerType = $('#offer_type').val();
            
            // Handle Discount Value visibility
            if (offerType === 'percentage' || offerType === 'fixed') {
                $('#discount_value_wrapper').show();
                $('#discount_value').attr('required', true);
                if (offerType === 'percentage') {
                    $('#discount_hint').text('Enter percentage (0-100)');
                    $('#discount_value').attr('max', 100);
                } else {
                    $('#discount_hint').text('Enter fixed amount');
                    $('#discount_value').removeAttr('max');
                }
            } else {
                $('#discount_value_wrapper').hide();
                $('#discount_value').attr('required', false);
            }

            // Handle Per Piece Price visibility
            if (offerType === 'buy_one_get_one' || offerType === 'buy_two_get_one') {
                $('#per_piece_price_wrapper').show();
                $('#per_piece_price').attr('required', true);
            } else {
                $('#per_piece_price_wrapper').hide();
                $('#per_piece_price').attr('required', false);
            }
        }

        $('#offer_type').on('change', toggleDiscountField);
        toggleDiscountField(); // Initialize on page load

        // Form validation
        $('#voucherForm').validate({
            rules: {
                vendor_detail_id: { required: true },
                title: { required: true },
                description: { required: true },
                terms_and_conditions: { required: true },
                offer_type: { required: true },

            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.mb-3').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });

        // Form submission
        $('#voucherForm').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,
                dataType: 'json',
                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.vouchers") }}';
                        });
                    } else {
                        Swal.fire({
                            text: response.message,
                            iconHtml: '<img src="{{asset('/')}}admin_assets/assets/images/close.svg" class="img-fluid">',
                            icon: 'error'
                        });
                        $('#submitButton').prop('disabled', false).text('Submit');
                    }
                },
                error: function(xhr) {
                    var errors = xhr.responseJSON?.errors;
                    if (errors) {
                        var errorMsg = Object.values(errors).flat().join('<br>');
                        Swal.fire({
                            html: errorMsg,
                            iconHtml: '<img src="{{asset('/')}}admin_assets/assets/images/close.svg" class="img-fluid">',
                            icon: 'error'
                        });
                    } else {
                        Swal.fire({
                            text: 'Something went wrong. Please try again.',
                            iconHtml: '<img src="{{asset('/')}}admin_assets/assets/images/close.svg" class="img-fluid">',
                            icon: 'error'
                        });
                    }
                    $('#submitButton').prop('disabled', false).text('Submit');
                }
            });
        });
    });
</script>
@stop