@extends('app')

@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-md-6">
                    <div class="row justify-content-start align-items-center">
                        <div class="col-auto">
                            <h1 class="m-0">Jawatan</h1>
                        </div>
                        <div class="col-auto">
                            <button type="button" class="btn btn-hover" data-toggle="modal" data-target="#createModal">Tambah
                                Baru</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Tanggal syawal</a></li>
                    </ol>
                </div>
                <div class="col-md-6">
                    <div class="row justify-content-end align-items-center">
                    </div>
                </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 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;">Jawatan</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Butiran</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Tindakan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($jabatans as $item)
                                    <tr>
                                        <td class="text-center">{{ $loop->iteration }}</td>
                                        <td class="text-center">{{ $item->jabatan }}</td>
                                        <td class="text-center">{{ $item->keterangan }}</td>
                                        <td class="text-center">
                                            <label class="custom-switch">
                                                <input id="switch-status {{ $item->id }}" class="switch-status"
                                                    type="checkbox" {{ $item->status ? 'checked' : '' }}
                                                    data-id="{{ $item->id }}">
                                                <span class="slider"></span>
                                            </label>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Data Table -->
    </div>

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

    @if (session('success'))
        <script>
            Swal.fire({
                title: 'Sukses!',
                text: "{{ session('success') }}",
                icon: 'success',
                confirmButtonText: 'OK'
            });
        </script>
    @endif

    @if (session('error'))
        <script>
            Swal.fire({
                title: 'Error!',
                text: "{{ session('error') }}",
                icon: 'error',
                confirmButtonText: 'OK'
            });
        </script>
    @endif

    <script>
        document.querySelectorAll('.switch-status').forEach(function(element) {
            element.addEventListener('change', function() {
                let status = this.checked ? 1 : 0;
                let jawatanId = this.getAttribute('data-id');
                axios.put(`/jawatan/${jawatanId}/update-status`, {
                        status: status
                    })
                    .then(function(response) {
                        Swal.fire({
                            title: 'Sukses!',
                            text: response.data.message,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        });
                    })
                    .catch(function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: 'Gagal memperbarui status jawatan. Silakan coba lagi.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    });
            });
        });
    </script>
@endsection