@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">Shipping Settings</h4>
        </div>
        <div class="card-body">
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <form action="{{ route('admin.settings.update', 'shipping') }}" method="POST">
                @csrf
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Default Shipping Fee</label>
                            <input type="number" name="settings[default_shipping_fee]" class="form-control" 
                                   value="{{ $settings['default_shipping_fee'] ?? '0' }}" step="0.01" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Free Shipping Minimum</label>
                            <input type="number" name="settings[free_shipping_minimum]" class="form-control" 
                                   value="{{ $settings['free_shipping_minimum'] ?? '0' }}" step="0.01">
                            <small class="text-muted">Set 0 to disable free shipping</small>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" name="settings[enable_local_pickup]" class="form-check-input" 
                                       value="1" {{ ($settings['enable_local_pickup'] ?? '') ? 'checked' : '' }}>
                                <label class="form-check-label">Enable Local Pickup</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Local Pickup Address</label>
                            <textarea name="settings[local_pickup_address]" class="form-control" rows="3">{{ $settings['local_pickup_address'] ?? '' }}</textarea>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Shipping Zones</label>
                            <div class="shipping-zones">
                                @foreach(($settings['shipping_zones'] ?? []) as $index => $zone)
                                <div class="shipping-zone mb-2">
                                    <div class="input-group">
                                        <input type="text" name="settings[shipping_zones][{{ $index }}][name]" 
                                               class="form-control" placeholder="Zone Name" value="{{ $zone['name'] }}">
                                        <input type="number" name="settings[shipping_zones][{{ $index }}][fee]" 
                                               class="form-control" placeholder="Fee" value="{{ $zone['fee'] }}" step="0.01">
                                        <button type="button" class="btn btn-danger remove-zone">Remove</button>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            <button type="button" class="btn btn-secondary btn-sm mt-2" id="addZone">Add Shipping Zone</button>
                        </div>
                    </div>
                </div>
                <div class="text-end">
                    <button type="submit" class="btn btn-primary">Save Settings</button>
                </div>
            </form>
        </div>
    </div>
</div>


<script>
    document.addEventListener('DOMContentLoaded', function() {
        let zoneCount = {{ count($settings['shipping_zones'] ?? []) }};
        
        document.getElementById('addZone').addEventListener('click', function() {
            const zoneHtml = `
                <div class="shipping-zone mb-2">
                    <div class="input-group">
                        <input type="text" name="settings[shipping_zones][${zoneCount}][name]" 
                               class="form-control" placeholder="Zone Name" required>
                        <input type="number" name="settings[shipping_zones][${zoneCount}][fee]" 
                               class="form-control" placeholder="Fee" step="0.01" required>
                        <button type="button" class="btn btn-danger remove-zone">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                </div>
            `;
            document.querySelector('.shipping-zones').insertAdjacentHTML('beforeend', zoneHtml);
            zoneCount++;
        });
    
        document.querySelector('.shipping-zones').addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-zone') || e.target.closest('.remove-zone')) {
                e.target.closest('.shipping-zone').remove();
            }
        });
    });
</script>
@endsection