@extends('app')

@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2 align-items-center">
                <div class="col-sm-6">
                    <h1 class="m-0">Daerah</h1>
                </div>
                <div class="col-sm-6 text-right">
                    <button type="button" class="btn btn-sm text-white" style="background-color: #5268B5;" data-toggle="modal" data-target="#createModal">
                        <i class="fas fa-plus mr-1"></i> Tambah Baru
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <!-- Data Table -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <table id="daerahTable" class="table table-bordered table-hover">
                            <thead>
                                <tr class="text-center">
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Bil</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Daerah</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Butiran</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Status</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Tindakan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($daerahs as $daerah)
                                    <tr>
                                        <td class="text-center">{{ $loop->iteration }}</td>
                                        <td class="text-center">{{ $daerah->daerah }}</td>
                                        <td class="text-center">{{ $daerah->keterangan }}</td>
                                        <td class="text-center">
                                            <button type="button" class="btn btn-sm btn-status {{ $daerah->status ? 'btn-success' : 'btn-danger' }}"
                                                data-id="{{ $daerah->id }}" data-status="{{ $daerah->status ? 1 : 0 }}">
                                                {{ $daerah->status ? 'Active' : 'Deactive' }}
                                            </button>
                                        </td>
                                        <td class="text-center">
                                            <div class="d-flex justify-content-center align-items-center">
                                                <button type="button" class="btn btn-sm btn-warning mr-1 text-white" data-toggle="modal" data-target="#editModal{{ $daerah->id }}" title="Edit">
                                                    <i data-lucide="edit" style="width: 14px; height: 14px;"></i> Edit
                                                </button>
                                                <button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#deleteModal{{ $daerah->id }}" title="Hapus">
                                                    <i data-lucide="trash-2" style="width: 14px; height: 14px;"></i> Hapus
                                                </button>
                                            </div>

                                            @include('admin.daerah.crud.edit')
                                            @include('admin.daerah.crud.delete')
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Data Table -->
    </div>

    @include('admin.daerah.crud.create')

    @if (session('success'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                toastr.success("{{ session('success') }}");
            });
        </script>
    @endif

    @if (session('error'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                toastr.error("{{ session('error') }}");
            });
        </script>
    @endif

@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#daerahTable').DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
            });

            $(document).on('click', '.btn-status', function() {
                let btn = $(this);
                let daerahId = btn.data('id');
                let currentStatus = btn.data('status');
                let newStatus = currentStatus ? 0 : 1;

                $.ajax({
                    url: `/daerah/${daerahId}/update-status`,
                    type: 'PUT',
                    data: {
                        status: newStatus,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        toastr.success(response.message ? response.message : 'Status berhasil diperbarui');
                        
                        // Auto refresh setelah berhasil
                        setTimeout(function() {
                            window.location.reload();
                        }, 1000);
                    },
                    error: function(xhr) {
                        toastr.error('Gagal memperbarui status daerah. Silakan coba lagi.');
                    }
                });
            });
        });
    </script>
@endpush