@extends('backEnd.layouts.master')
@section('title', 'Shipping')

@push('styles')
<style>
.shipping-page .card { border: 1px solid #dee2e6; border-radius: 8px; margin-bottom: 20px; background: #fff; }
.shipping-page .card-header { background: #fff; border-bottom: 1px solid #dee2e6; padding: 14px 20px; font-weight: 700; }
.shipping-page .blue-btn { background: var(--primary); color: #fff; border: none; padding: 8px 16px; border-radius: 4px; text-decoration: none; display: inline-block; }
.shipping-page .blue-btn:hover { background: var(--accent); color: #fff; }
.shipping-page .warning-btn { background: #f59e0b; color: #fff; border: none; padding: 8px 16px; border-radius: 4px; text-decoration: none; display: inline-block; }
.shipping-page .bulk-btn, .shipping-page .search-btn { background: var(--primary); color: #fff; border: none; padding: 8px 16px; border-radius: 0 4px 4px 0; }
.shipping-page .bulk-box, .shipping-page .search-box { display: flex; }
.shipping-page .bulk-box .form-control { border-radius: 4px 0 0 4px; }
.shipping-page .search-box .form-control { border-radius: 4px 0 0 4px; }
.shipping-page .table-theme thead th { background: #f8f9fa; font-weight: 600; border-bottom: 2px solid #dee2e6; }
.shipping-page .enable_btn { display: inline-block; background: var(--primary); color: #fff; padding: 3px 10px; border-radius: 4px; font-size: 12px; }
.shipping-page .red { color: #dc3545; }
.shipping-page #form-panel { display: none; }
.shipping-page .btn-list { display: none; }
.shipping-page .dnone { display: none !important; }
.shipping-page #district_ids { min-height: 280px; }
.shipping-page .mt-15 { margin-top: 15px; }
</style>
@endpush

@section('content')
<div class="container-fluid py-3 shipping-page">
    <div class="alert alert-light border mb-3 py-2 small">
        <i class="fas fa-link text-primary me-1"></i>
        এখানে set করা shipping rate **Website Checkout**, **Create Order**, এবং **Product Page shipping table** — সব জায়গায় একইভাবে apply হবে।
        Product-এ <strong>Free Shipping</strong> ON থাকলে cart/order-এ shipping ৳0 হবে।
    </div>
    <div class="card">
        <div class="card-header">
            <div class="row align-items-center">
                <div class="col-lg-6"><span>Shipping</span></div>
                <div class="col-lg-6">
                    <div class="float-end">
                        <a onclick="onFormPanel()" href="javascript:void(0);" class="btn blue-btn btn-form">
                            <i class="fa fa-plus"></i> Add New
                        </a>
                        <a onclick="onListPanel()" href="javascript:void(0);" class="btn warning-btn btn-list">
                            <i class="fa fa-reply"></i> Back to List
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div id="list-panel" class="card-body">
            <div class="row mb-3">
                <div class="col-lg-4">
                    <div class="form-group bulk-box">
                        <select id="bulk-action" class="form-control">
                            <option value="">Select Action</option>
                            <option value="publish">Publish</option>
                            <option value="draft">Draft</option>
                        </select>
                        <button type="button" onclick="onBulkAction()" class="btn bulk-btn">Apply</button>
                    </div>
                </div>
                <div class="col-lg-3"></div>
                <div class="col-lg-5">
                    <div class="form-group search-box">
                        <input id="search" name="search" type="text" class="form-control" placeholder="Search...">
                        <button type="button" onclick="onSearch()" class="btn search-btn">Search</button>
                    </div>
                </div>
            </div>
            <div id="tp_datalist">
                @include('backEnd.shipping.partials.table', compact('rates'))
            </div>
        </div>

        <div id="form-panel" class="card-body">
            <form id="DataEntry_formId">
                @csrf
                <input type="hidden" name="RecordId" id="RecordId" value="">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label for="title">Title<span class="red">*</span></label>
                            <input type="text" name="title" id="title" class="form-control" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label for="shipping_fee">Shipping Fee<span class="red">*</span></label>
                            <input type="number" name="shipping_fee" id="shipping_fee" class="form-control" min="0" step="0.01" required>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label for="delivery_time">Delivery Time</label>
                            <input type="text" name="delivery_time" id="delivery_time" class="form-control" placeholder="e.g., 24 Hours, 48 Hours, 3-5 Days">
                            <small class="text-muted">Enter delivery time information (e.g., 24 Hours, 48 Hours, 3-5 Days)</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label for="is_default">Is Default<span class="red">*</span></label>
                            <select name="is_default" id="is_default" class="form-control">
                                <option value="">Not Default</option>
                                <option value="1">Default</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label for="is_publish">Status<span class="red">*</span></label>
                            <select name="is_publish" id="is_publish" class="form-control">
                                <option value="1">Publish</option>
                                <option value="2">Draft</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <label for="desc">Description</label>
                            <textarea name="desc" id="desc" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <label for="district_ids">Applicable Districts <small class="text-muted">(Select districts for this shipping option)</small></label>
                            <select name="district_ids[]" id="district_ids" class="form-control" multiple>
                                @foreach($districts as $district)
                                <option value="{{ $district->id }}">{{ $district->name }}@if($district->bn_name) ({{ $district->bn_name }})@endif</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row mt-15">
                    <div class="col-lg-12">
                        <button type="button" id="submit-form" class="btn blue-btn">Save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header"><h5 class="mb-0">Shipping Mode (Tenant-specific)</h5></div>
                <div class="card-body">
                    <p class="text-muted mb-3">Choose how shipping is calculated for your store. This setting is isolated per tenant—other tenants are not affected.</p>
                    <form id="ShippingSelectionSettings_formId">
                        <div class="form-group mb-3">
                            <label class="d-block fw-bold mb-2">Shipping Mode</label>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="shipping_mode" id="shipping_mode_simple" value="simple"
                                    {{ ($setting->shipping_mode ?? 'district_wise') === 'simple' ? 'checked' : '' }}>
                                <label class="form-check-label" for="shipping_mode_simple">
                                    <strong>Simple Shipping</strong> — Customer selects only "Inside Dhaka" or "Outside Dhaka"; fee is applied from the rates below.
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="shipping_mode" id="shipping_mode_district_wise" value="district_wise"
                                    {{ ($setting->shipping_mode ?? 'district_wise') !== 'simple' ? 'checked' : '' }}>
                                <label class="form-check-label" for="shipping_mode_district_wise">
                                    <strong>District-wise Shipping</strong> — Customer selects district; shipping charge is auto-selected from the shipping list above for that district.
                                </label>
                            </div>
                        </div>

                        <div id="shipping_fee_fields" style="{{ ($setting->shipping_mode ?? 'district_wise') === 'simple' ? '' : 'display:none;' }}">
                            <div class="alert alert-info mb-3">Rates below apply only when Simple Shipping mode is selected.</div>
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="inside_dhaka_fee">Inside Dhaka Shipping Fee <span class="red">*</span></label>
                                        <input type="number" name="inside_dhaka_fee" id="inside_dhaka_fee" class="form-control" step="0.01" min="0" value="{{ $setting->inside_dhaka_fee ?? 60 }}">
                                        <small class="text-muted">Shipping fee for orders inside Dhaka</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="outside_dhaka_fee">Outside Dhaka Shipping Fee <span class="red">*</span></label>
                                        <input type="number" name="outside_dhaka_fee" id="outside_dhaka_fee" class="form-control" step="0.01" min="0" value="{{ $setting->outside_dhaka_fee ?? 120 }}">
                                        <small class="text-muted">Shipping fee for orders outside Dhaka</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="district_wise_note" class="alert alert-secondary mb-3" style="{{ ($setting->shipping_mode ?? 'district_wise') === 'simple' ? 'display:none;' : '' }}">
                            When District-wise mode is selected, the "Shipping" list above is used. Add rows with applicable districts; the charge for the customer's selected district will be applied automatically at checkout.
                        </div>

                        <a id="submit-shipping-selection-settings" href="javascript:void(0);" class="btn blue-btn">Save Settings</a>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header"><h5 class="mb-0">Shipping Message</h5></div>
                <div class="card-body">
                    <form id="ShippingMessage_formId">
                        <div class="form-group mt-3 mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="show_shipping_info_table" id="show_shipping_info_table" value="1"
                                    {{ ($setting->show_shipping_info_table ?? true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="show_shipping_info_table">
                                    Show Shipping Information Table on Product Page
                                </label>
                                <small class="form-text text-muted d-block">Enable this to display shipping information table (Area, Delivery Charge, Times) on product detail pages</small>
                            </div>
                            <div class="alert alert-info mt-3" role="alert">
                                <strong>Shipping Table Layout Preview (Sample Data)</strong>
                                <div class="table-responsive mt-2">
                                    <table class="table table-bordered table-striped mb-0" style="background:#fff">
                                        <thead class="table-light">
                                            <tr>
                                                <th class="text-center" style="width:30%">Area</th>
                                                <th class="text-center" style="width:30%">Delivery Charge</th>
                                                <th class="text-center" style="width:40%">Times</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr><td class="text-center">XXXXXX</td><td class="text-center">৳XXXXXX</td><td class="text-center">XXXXXX</td></tr>
                                            <tr><td class="text-center">XXXXXX</td><td class="text-center">৳XXXXXX</td><td class="text-center">XXXXXX</td></tr>
                                            <tr><td class="text-center">XXXXXX</td><td class="text-center">৳XXXXXX</td><td class="text-center">XXXXXX</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                                <small class="form-text text-muted d-block mt-2">This is a preview of how the shipping info table will appear for customers on the product page.</small>
                            </div>
                        </div>
                        <div class="form-group mb-3">
                            <label for="shipping_message">Shipping Message</label>
                            <textarea name="shipping_message" id="shipping_message" class="form-control" rows="3">{{ $setting->shipping_message ?? '' }}</textarea>
                            <small class="text-muted">This message will be displayed on the checkout page</small>
                        </div>
                        <a id="submit-shipping-message" href="javascript:void(0);" class="btn blue-btn">Save Settings</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const base_url = @json(url('/admin'));
const TEXT = {
    "Do you really want to edit this record": "Do you really want to edit this record?",
    "Do you really want to delete this record": "Do you really want to delete this record?",
    "Do you really want to publish this records": "Do you really want to publish these records?",
    "Do you really want to draft this records": "Do you really want to draft these records?",
    "Do you really want to delete this records": "Do you really want to delete these records?",
    "Please select record": "Please select at least one record.",
    "Please select action": "Please select an action."
};
function onSuccessMsg(msg) { toastr.success(msg); }
function onErrorMsg(msg) { toastr.error(msg); }
function onCustomModal(msg, callback) {
    Swal.fire({
        title: 'Confirm',
        text: msg,
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#2d6a4f',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Yes',
        cancelButtonText: 'Cancel'
    }).then(function(result) {
        if (result.isConfirmed && typeof window[callback] === 'function') {
            window[callback]();
        }
    });
}
</script>
<script src="{{ asset('backEnd/js/shipping.js') }}"></script>
@endpush