{% extends "base.html" %}
{% block title %}Global Settings{% endblock %}
{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-{{ message.tags }}">{{ message }}</div>
                {% endfor %}
            {% endif %}

            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">Global Settings</h5>
                </div>
                <div class="card-body">
                    <form method="post" id="global-settings-form">
                        {% csrf_token %}
                        <ul class="nav nav-tabs" id="settingsTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="tax-tab" data-bs-toggle="tab" data-bs-target="#tax" type="button" role="tab" aria-controls="tax" aria-selected="true">Tax</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="timings-tab" data-bs-toggle="tab" data-bs-target="#timings" type="button" role="tab" aria-controls="timings" aria-selected="false">Timings</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pricing-tab" data-bs-toggle="tab" data-bs-target="#pricing" type="button" role="tab" aria-controls="pricing" aria-selected="false">Pricing</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="distance-tab" data-bs-toggle="tab" data-bs-target="#distance" type="button" role="tab" aria-controls="distance" aria-selected="false">Distance</button>
                            </li>
                        </ul>
                        <div class="tab-content p-3 border border-top-0" id="settingsTabsContent">
                            <div class="tab-pane fade show active" id="tax" role="tabpanel" aria-labelledby="tax-tab">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="cgst" class="form-label">CGST (%)</label>
                                        <input type="number" step="0.01" class="form-control" id="cgst" name="cgst" value="{{ cgst }}">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="sgst" class="form-label">SGST (%)</label>
                                        <input type="number" step="0.01" class="form-control" id="sgst" name="sgst" value="{{ sgst }}">
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="timings" role="tabpanel" aria-labelledby="timings-tab">
                                <div class="row mb-3">
                                    <div class="col-md-4">
                                        <label class="form-label">Start Time</label>
                                        <div class="d-flex">
                                            <select id="start_hour" class="form-select me-2" aria-label="Start hour">
                                                <option value="">HH</option>
                                                {% for h in hours %}
                                                <option value={{h}} >{{ h }}</option>
                                                {% endfor %}
                                            </select>
                                            <select id="start_minute" class="form-select me-2" aria-label="Start minute">
                                               {% for m in minutes %}
                                                <option value="{{ m|stringformat:'02d' }}">{{ m|stringformat:'02d' }}</option>
                                                {% endfor %}
                                            </select>
                                            <select id="start_ampm" class="form-select" aria-label="Start AM/PM">
                                                <option value="AM">AM</option>
                                                <option value="PM">PM</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">End Time</label>
                                        <div class="d-flex">
                                            <select id="end_hour" class="form-select me-2" aria-label="End hour">
                                                <option value="">HH</option>
                                                {% for h in hours %}
                                                <option value={{h}}>{{ h }}</option>
                                                {% endfor %}
                                            </select>
                                            <select id="end_minute" class="form-select me-2" aria-label="End minute">
                                                {% for m in minutes %}
                                                <option value="{{ m|stringformat:'02d' }}">{{ m|stringformat:'02d' }}</option>
                                                {% endfor %}
                                            </select>
                                            <select id="end_ampm" class="form-select" aria-label="End AM/PM">
                                                <option value="AM">AM</option>
                                                <option value="PM">PM</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4 d-flex align-items-end">
                                        <button type="button" id="add-slot" class="btn btn-primary">Add Slot</button>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <h6>Available Slots</h6>
                                    <ul id="slots-list" class="list-group">
                                        {% for slot in time_slots %}
                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                {{ slot }}
                                                <button type="button" class="btn btn-sm btn-danger remove-slot">Remove</button>
                                                <input type="hidden" name="time_slots[]" value="{{ slot }}">
                                            </li>
                                        {% empty %}
                                            <li class="list-group-item text-muted">No slots added yet.</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="pricing" role="tabpanel" aria-labelledby="pricing-tab">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="platform_charges" class="form-label">Platform Charges (%)</label>
                                        <input type="number" step="0.01" class="form-control" id="platform_charges" name="platform_charges" value="{{ platform_charges }}">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="additional_charges" class="form-label">Additional Charges</label>
                                        <input type="number" step="0.01" class="form-control" id="additional_charges" name="additional_charges" value="{{ additional_charges }}">
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="distance" role="tabpanel" aria-labelledby="distance-tab">
                                <div class="row mb-3">
                                    <div class="col-md-3">
                                        <label for="dist_from" class="form-label">From (km)</label>
                                        <input type="number" step="0.01" class="form-control" id="dist_from" placeholder="0">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="dist_to" class="form-label">To (km)</label>
                                        <input type="number" step="0.01" class="form-control" id="dist_to" placeholder="5">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="dist_charge" class="form-label">Charge (RS)</label>
                                        <input type="number" step="0.01" class="form-control" id="dist_charge" placeholder="20">
                                    </div>
                                    <div class="col-md-3 d-flex align-items-end">
                                        <button type="button" id="add-distance" class="btn btn-primary">Add Distance Charge</button>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <h6>Distance Charges</h6>
                                    <ul id="distance-list" class="list-group">
                                        {% for item in distance_charges %}
                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                {{ item.range }} km — {{ item.charge }} RS
                                                <button type="button" class="btn btn-sm btn-danger remove-distance">Remove</button>
                                                <input type="hidden" name="distance_ranges[]" value="{{ item.range }}">
                                                <input type="hidden" name="distance_charges[]" value="{{ item.charge }}">
                                            </li>
                                        {% empty %}
                                            <li class="list-group-item text-muted">No distance charges added yet.</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="mt-3 text-end">
                            <button type="submit" class="btn btn-success">Save Settings</button>
                            <a href="#" class="btn btn-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
$(function(){
    // Add slot handler using 12-hour selects
    $('#add-slot').on('click', function(){
        const sh = $('#start_hour').val();
        const sm = $('#start_minute').val();
        const sa = $('#start_ampm').val();
        const eh = $('#end_hour').val();
        const em = $('#end_minute').val();
        const ea = $('#end_ampm').val();

        if(!sh || !sm || !sa || !eh || !em || !ea){
            alert('Please select start and end time (hour, minute and AM/PM)');
            return;
        }

        const pad = (s) => (s.length === 1 ? '0' + s : s);
        const format12 = (h, m, ap) => `${pad(h)}:${m} ${ap}`;

        const slotText = `${format12(sh, sm, sa)} - ${format12(eh, em, ea)}`;

        // If the "No slots added yet." placeholder exists, remove it
        $('#slots-list .text-muted').remove();

        const $li = $('<li/>', {class: 'list-group-item d-flex justify-content-between align-items-center'});
        $li.text(slotText);
        const $remove = $('<button/>', {type: 'button', class: 'btn btn-sm btn-danger remove-slot', text: 'Remove'});
        const $hidden = $('<input/>', {type: 'hidden', name: 'time_slots[]', value: slotText});
        $li.append($remove).append($hidden);
        $('#slots-list').append($li);

        // Clear selects
        $('#start_hour').val('');
        $('#start_minute').val('00');
        $('#start_ampm').val('AM');
        $('#end_hour').val('');
        $('#end_minute').val('00');
        $('#end_ampm').val('AM');
    });

    // Remove slot handler (delegated)
    $('#slots-list').on('click', '.remove-slot', function(){
        $(this).closest('li').remove();
        // if no slots left, show placeholder
        if($('#slots-list li').length === 0){
            $('#slots-list').append($('<li/>', {class: 'list-group-item text-muted', text: 'No slots added yet.'}));
        }
    });

    // Distance charges add handler
    $('#add-distance').on('click', function(){
        const from = $('#dist_from').val();
        const to = $('#dist_to').val();
        const charge = $('#dist_charge').val();

        if(from === '' || to === '' || charge === ''){
            alert('Please enter from, to and charge values');
            return;
        }

        const rangeText = `${from}-${to}`;

        // Remove placeholder
        $('#distance-list .text-muted').remove();

        const $li = $('<li/>', {class: 'list-group-item d-flex justify-content-between align-items-center'});
        $li.text(`${rangeText} km — ${charge} RS`);
        const $remove = $('<button/>', {type: 'button', class: 'btn btn-sm btn-danger remove-distance', text: 'Remove'});
        const $hiddenRange = $('<input/>', {type: 'hidden', name: 'distance_ranges[]', value: rangeText});
        const $hiddenCharge = $('<input/>', {type: 'hidden', name: 'distance_charges[]', value: charge});
        $li.append($remove).append($hiddenRange).append($hiddenCharge);
        $('#distance-list').append($li);

        // clear
        $('#dist_from').val('');
        $('#dist_to').val('');
        $('#dist_charge').val('');
    });

    // Remove distance handler
    $('#distance-list').on('click', '.remove-distance', function(){
        $(this).closest('li').remove();
        if($('#distance-list li').length === 0){
            $('#distance-list').append($('<li/>', {class: 'list-group-item text-muted', text: 'No distance charges added yet.'}));
        }
    });
});
</script>
{% endblock %}