@php
$records = collect($alerts ?? []);

$stages = $records->where('alert_type', 'stage');
$withdrawls = $records->where('alert_type', 'withdrawl');
@endphp

{{-- ========================= --}}
{{-- TOOLBAR --}}
{{-- ========================= --}}
<div class="management-toolbar mb-4">

    <div class="roles-actions flex justify-end gap-3">

        <div class="roles-search relative flex items-center">

            <i class="ki-filled ki-magnifier absolute left-3 text-gray-400 pointer-events-none"></i>

            <input
                id="alert_search"
                data-kt-datatable-search="#kt_datatable_alert"
                placeholder="Search alert..."
                type="text"
                class="pl-9 border-none rounded-lg" />
        </div>

        <button
            type="button"
            class="kt-btn p-4"
            id="alert_add_btn"
            data-kt-modal-toggle="#alert_modal"
            style="background:#2563eb;color:#fff;">

            <i class="ki-filled ki-plus"></i>
            Add Data
        </button>

    </div>

</div>

{{-- ========================= --}}
{{-- STAGE TABLE --}}
{{-- ========================= --}}
<div class="mb-8">

    <div class="flex items-center justify-between mb-3">

        <h3 class="text-lg font-semibold">
            Stage Alerts
        </h3>

        <button
            type="button"
            class="kt-btn kt-btn-sm kt-btn-primary alert-section-edit-btn"
            data-type="stage">

            <i class="ki-filled ki-pencil"></i>
            Edit
        </button>

    </div>

    <table class="kt-table kt-table-border w-full">

        <thead>
            <tr>
                <th>Stage</th>
                <th>Green</th>
                <th>Yellow</th>
                <th>Amber</th>
                <th>Red</th>
            </tr>
        </thead>

        <tbody>

            @forelse($stages as $record)

            <tr>
                <td>{{ $record->stage_name }}</td>
                <td>{{ $record->green_days }}</td>
                <td>{{ $record->yellow_days }}</td>
                <td>{{ $record->amber_days }}</td>
                <td>{{ $record->red_days }}</td>
            </tr>

            @empty

            <tr>
                <td colspan="5" class="text-center p-4 text-gray-500">
                    No stage alerts found
                </td>
            </tr>

            @endforelse

        </tbody>

    </table>

</div>

{{-- ========================= --}}
{{-- WITHDRAWL TABLE --}}
{{-- ========================= --}}
<div class="mb-8">

    <div class="flex items-center justify-between mb-3">

        <h3 class="text-lg font-semibold">
            Withdrawl Alerts
        </h3>

        <button
            type="button"
            class="kt-btn kt-btn-sm kt-btn-primary alert-section-edit-btn"
            data-type="withdrawl">

            <i class="ki-filled ki-pencil"></i>
            Edit
        </button>

    </div>

    <table class="kt-table kt-table-border w-full">

        <thead>
            <tr>
                <th>Withdrawl</th>
                <th>Green</th>
                <th>Yellow</th>
                <th>Amber</th>
                <th>Red</th>
            </tr>
        </thead>

        <tbody>

            @forelse($withdrawls as $record)

            <tr>
                <td>{{ $record->stage_name }}</td>
                <td>{{ $record->green_days }}</td>
                <td>{{ $record->yellow_days }}</td>
                <td>{{ $record->amber_days }}</td>
                <td>{{ $record->red_days }}</td>
            </tr>

            @empty

            <tr>
                <td colspan="5" class="text-center p-4 text-gray-500">
                    No withdrawl alerts found
                </td>
            </tr>

            @endforelse

        </tbody>

    </table>

</div>

{{-- ========================= --}}
{{-- MODAL --}}
{{-- ========================= --}}
<div class="kt-modal" id="alert_modal" data-kt-modal="true">

    <div class="kt-modal-content max-w-[1100px] top-[5%] rounded-2xl">

        {{-- HEADER --}}
        <div class="kt-modal-header py-5 px-6 border-b bg-gray-50">

            <div>
                <h3 id="alert_modal_title" class="text-xl font-semibold">
                    Alert Configuration
                </h3>
            </div>

            <button data-kt-modal-dismiss="true" class="kt-btn kt-btn-light">
                ✕
            </button>

        </div>

        {{-- BODY --}}
        <div class="kt-modal-body p-6">

            <form id="alert_form">
                @csrf

                {{-- ========================= --}}
                {{-- TABS --}}
                {{-- ========================= --}}
                <div class="flex gap-3 mb-5 border-b pb-3" style="display: flex; justify-content:center">

                    <button
                        type="button"
                        class="alert-tab-btn kt-btn kt-btn-primary kt-btn common-secondary-btn roles-add-btn p-4"
                        data-tab="stage_tab" style="background-color:#2563eb;color:#fff;border-color:#2563eb;">

                        Stage Alerts
                    </button>

                    <button
                        type="button"
                        class="alert-tab-btn kt-btn kt-btn-light kt-btn common-secondary-btn roles-add-btn p-4"
                        data-tab="withdrawl_tab" style="background-color:#2563eb;color:#fff;border-color:#2563eb;">

                        Withdrawl Alerts
                    </button>

                </div>

                {{-- ========================= --}}
                {{-- STAGE TAB --}}
                {{-- ========================= --}}
                <div id="stage_tab" class="alert-tab-content">

                    @php
                    $stageRows = [
                        '1st_tranche_to_plinth',
                        'plinth_to_2nd_tranche',
                        '2nd_tranche_to_lintel',
                        'lintel_to_3rd_tranche',
                        '3rd_tranche_to_roof',
                        'roof_to_4th_tranche',
                        'overall_1st_tranche_to_roof'
                    ];
                    @endphp

                    <div class="grid gap-4">

                        @foreach($stageRows as $i => $stage)

                        <div class="border p-4 rounded-lg">

                            <input
                                type="hidden"
                                name="stages[{{ $i }}][stage]"
                                value="{{ $stage }}">

                            <div class="font-semibold mb-2">
                                {{ ucwords(str_replace('_', ' ', $stage)) }}
                            </div>

                            <div class="grid grid-cols-4 gap-3">

                                <input
                                    type="number"
                                    data-stage="{{ $stage }}"
                                    name="stages[{{ $i }}][green]"
                                    placeholder="Green"
                                    class="kt-input">

                                <input
                                    type="number"
                                    data-stage="{{ $stage }}"
                                    name="stages[{{ $i }}][yellow]"
                                    placeholder="Yellow"
                                    class="kt-input">

                                <input
                                    type="number"
                                    data-stage="{{ $stage }}"
                                    name="stages[{{ $i }}][amber]"
                                    placeholder="Amber"
                                    class="kt-input">

                                <input
                                    type="number"
                                    data-stage="{{ $stage }}"
                                    name="stages[{{ $i }}][red]"
                                    placeholder="Red"
                                    class="kt-input">

                            </div>

                        </div>

                        @endforeach

                    </div>

                </div>

                {{-- ========================= --}}
                {{-- WITHDRAWL TAB --}}
                {{-- ========================= --}}
                <div id="withdrawl_tab" class="alert-tab-content hidden">

                    @php
                    $withdrawlRows = [
                        '1st_tranche_withdrawl_date',
                        '2nd_tranche_withdrawl_date',
                        '3rd_tranche_withdrawl_date',
                        '4th_tranche_withdrawl_date',
                    ];
                    @endphp

                    <div class="grid gap-4">

                        @foreach($withdrawlRows as $i => $w)

                        <div class="border p-4 rounded-lg">

                            <input
                                type="hidden"
                                name="withdrawls[{{ $i }}][name]"
                                value="{{ $w }}">

                            <div class="font-semibold mb-2">
                                {{ ucwords(str_replace('_', ' ', $w)) }}
                            </div>

                            <div class="grid grid-cols-4 gap-3">

                                <input
                                    type="number"
                                    data-withdrawl="{{ $w }}"
                                    name="withdrawls[{{ $i }}][green]"
                                    placeholder="Green"
                                    class="kt-input">

                                <input
                                    type="number"
                                    data-withdrawl="{{ $w }}"
                                    name="withdrawls[{{ $i }}][yellow]"
                                    placeholder="Yellow"
                                    class="kt-input">

                                <input
                                    type="number"
                                    data-withdrawl="{{ $w }}"
                                    name="withdrawls[{{ $i }}][amber]"
                                    placeholder="Amber"
                                    class="kt-input">

                                <input
                                    type="number"
                                    data-withdrawl="{{ $w }}"
                                    name="withdrawls[{{ $i }}][red]"
                                    placeholder="Red"
                                    class="kt-input">

                            </div>

                        </div>

                        @endforeach

                    </div>

                </div>

                {{-- ========================= --}}
                {{-- FOOTER --}}
                {{-- ========================= --}}
                <div class="flex justify-end gap-3 pt-6">

                    <button
                        type="button"
                        data-kt-modal-dismiss="true"
                        class="kt-btn kt-btn-light">

                        Cancel
                    </button>

                    <button
                        type="submit"
                        id="alert_submit_btn"
                        class="kt-btn kt-btn-primary">

                        Save
                    </button>

                </div>

            </form>

        </div>

    </div>

</div>

{{-- ========================= --}}
{{-- JS --}}
{{-- ========================= --}}
<script>

    const alertsData = @json($alerts);

    $(document).on('click', '.alert-tab-btn', function () {

        $('.alert-tab-btn')
            .removeClass('kt-btn-primary')
            .addClass('kt-btn-light');

        $(this)
            .addClass('kt-btn-primary')
            .removeClass('kt-btn-light');

        $('.alert-tab-content').addClass('hidden');

        $('#' + $(this).data('tab')).removeClass('hidden');
    });


    $('#alert_add_btn').on('click', function () {

        $('#alert_form')[0].reset();

        $('#alert_modal_title').text('Alert Configuration');

        // show all tabs
        $('.alert-tab-btn').removeClass('hidden');

        // default tab
        $('.alert-tab-btn')
            .removeClass('kt-btn-primary')
            .addClass('kt-btn-light');

        $('[data-tab="stage_tab"]')
            .addClass('kt-btn-primary')
            .removeClass('kt-btn-light');

        $('.alert-tab-content').addClass('hidden');

        $('#stage_tab').removeClass('hidden');
    });

    
    $(document).on('click', '.alert-section-edit-btn', function () {

        $('#alert_form')[0].reset();

        const type = $(this).data('type');

        const isStage = type === 'stage';

        $('#alert_modal_title').text(
            isStage
                ? 'Edit Stage Alerts'
                : 'Edit Withdrawl Alerts'
        );

        // reset tabs
        $('.alert-tab-content').addClass('hidden');

        $('.alert-tab-btn')
            .removeClass('kt-btn-primary')
            .addClass('kt-btn-light')
            .addClass('hidden');

        if (isStage) {

            // show only stage tab
            $('[data-tab="stage_tab"]')
                .removeClass('hidden')
                .addClass('kt-btn-primary')
                .removeClass('kt-btn-light');

            $('#stage_tab').removeClass('hidden');

        } else {

            // show only withdrawl tab
            $('[data-tab="withdrawl_tab"]')
                .removeClass('hidden')
                .addClass('kt-btn-primary')
                .removeClass('kt-btn-light');

            $('#withdrawl_tab').removeClass('hidden');
        }

        // fill values
        alertsData.forEach(record => {

            if (record.alert_type !== type) return;

            if (isStage) {

                $(`input[data-stage="${record.stage_name}"]`).each(function () {

                    const name = $(this).attr('name');

                    if (name.includes('[green]')) {
                        $(this).val(record.green_days);
                    }

                    if (name.includes('[yellow]')) {
                        $(this).val(record.yellow_days);
                    }

                    if (name.includes('[amber]')) {
                        $(this).val(record.amber_days);
                    }

                    if (name.includes('[red]')) {
                        $(this).val(record.red_days);
                    }
                });

            } else {

                $(`input[data-withdrawl="${record.stage_name}"]`).each(function () {

                    const name = $(this).attr('name');

                    if (name.includes('[green]')) {
                        $(this).val(record.green_days);
                    }

                    if (name.includes('[yellow]')) {
                        $(this).val(record.yellow_days);
                    }

                    if (name.includes('[amber]')) {
                        $(this).val(record.amber_days);
                    }

                    if (name.includes('[red]')) {
                        $(this).val(record.red_days);
                    }
                });
            }
        });

        const modal = document.querySelector('#alert_modal');

        window.KTModal?.getOrCreateInstance(modal).show();
    });

</script>