@section('title')
Redirects
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/2.1.2/css/dataTables.dataTables.css" />
<script src="https://cdn.datatables.net/2.1.2/js/dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="https://cdn.datatables.net/select/3.0.0/js/dataTables.select.js"></script>
<script src="https://cdn.datatables.net/select/3.0.0/js/select.dataTables.js"></script>
<style>
    div.dt-container select.dt-input {
        width: 60px !important;
    }

    .select-info {
        margin-inline-start: 1rem;
    }

    tr.selected input {
        color: black;
    }

    .dt-select {
        width: 48px;
    }
</style>
@endsection

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            @lang('messages.redirect')
        </h2>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                <h2 class="text-2xl font-semibold" >@lang('messages.add_redirect')</h2>
                    <form method="post" action="{{ route('redirect.store') }}"
                    class="flex flex-wrap gap-4 w-full mt-2" style="margin-block-end: 64px">
                        @csrf
                        
                        <div class="block w-full">
                            <x-input-label for="source" :value="__('messages.source')" />
                            <x-text-input id="source" name="source" type="text" class=" w-full max-w-xl" autofocus autocomplete="source" />
                        </div>
                        <div class=" block w-full">
                            <x-input-label for="destination" :value="__('messages.destination')" />
                            <x-text-input id="destination" name="destination" type="text" class=" w-full max-w-xl" autofocus autocomplete="destination" />
                        </div>
                        <div class="flex gap-4" style="align-items: flex-end;">
                        <div>
                            <x-input-label for="destination" :value="__('messages.status')" />
                            <select name="status" class="border border-gray-300 rounded px-8 py-2 max-lg:">

                                <option value="301">301</option>
                                <option value="302">302</option>
                                <option value="307">307</option>
                                <option value="308">308</option>
                            </select>
                        </div>
                        <button type="submit" class="bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-600" style="height: 42px;">
                            @lang('messages.add')
                        </button>
                        
                        </div>
                    </form>
                    <h2 class="text-2xl font-semibold" >@lang('messages.redirect_list')</h2>
                    <table class="w-full table-fixed responsive" id="redirects">
                        <thead>
                            <tr>
                                <th></th>
                                <th>@lang('messages.source')</th>
                                <th>@lang('messages.destination')</th>
                                <th style="text-align: center;">@lang('messages.status')</th>
                                <th style="text-align: center;">@lang('messages.actions')</th>
                            </tr>
                        </thead>
                        <tbody class="text-[13px]">
                            @if (count($redirects) > 0)
                            @foreach ($redirects as $redirect)
                            <tr>
                                <td><span class="hidden" data-id="{{ $redirect->id }}"></span></td>
                                <td>
                                    <form method="post" action="{{ route('redirect.update', $redirect->id) }}"
                                        class="inline-block">
                                        @csrf
                                        @method('post')
                                        <input type="text" name="source" value="{{ $redirect->source }}"
                                            class="border border-gray-300 rounded px-2 py-1 w-full" />
                                </td>
                                <td>
                                    <input type="text" name="destination"
                                        value="{{ $redirect->destination }}"
                                        class="border border-gray-300 rounded px-2 py-1 w-full" />
                                </td>
                                <td style="text-align: center;">
                                    <input type="text" name="status" value="{{ $redirect->status }}"
                                        class="border border-gray-300 rounded px-2 py-1 text-center" />
                                </td>
                                <td style="text-align: center;">
                                    <div class="flex justify-center gap-4">
                                        <button type="submit">
                                            <ion-icon style="font-size: 22px;" name="create-outline"></ion-icon>
                                        </button>
                                        </form>


                                        <form method="POST"
                                            action="{{ route('redirect.destroy', $redirect->id) }}"
                                            class="inline-block">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit">
                                                <ion-icon style="font-size: 22px;"
                                                    name="trash-outline"></ion-icon>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                    <button type="button" id="delete-rows"
                            class="bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-600 shrink-0" style="height: 42px;">
                            @lang('messages.delete_selected')
                        </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            const table = $('#redirects').DataTable({
                order: [1, "desc"],
                language: {
                    url: '/files/{{ app()->getLocale() }}.json',
                },
                responsive: true,
                columnDefs: [{
                    orderable: false,
                    render: DataTable.render.select(),
                    targets: 0
                }],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
            });

            $('#delete-rows').on('click', async function() {
                const selectedRows = table.rows({
                    selected: true
                });

                const data = selectedRows.data();
                const dataIds = [];

                data.each(row => {
                    const match = row[0].match(/data-id="(\d+)"/);
                    if (match) {
                        dataIds.push(match[1]);
                    }
                });

                if (dataIds.length === 0) return;

                try {
                    const response = await fetch('/redirect', {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                                'content'),
                        },
                        body: JSON.stringify({
                            ids: dataIds
                        }),
                    });

                    if (!response.ok) throw new Error(await response.text());

                    selectedRows.remove().draw();
                } catch (error) {
                    console.error('Error occurred:', error);
                }
            });
        });
    </script>
</x-app-layout>