@extends('admin.layouts.layout')
@section('title', 'Tambah Data Pengiriman | Skripsi 2024')
@section('nav', 'Tambah Data Pengiriman')
@section('content')

<div class="pagetitle">
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-decoration-none text-black">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{route('pengiriman.index')}}" class="text-decoration-none text-black">Pengiriman</a></li>
            <li class="breadcrumb-item active">Tambah Data Pengiriman</li>
        </ol>
    </nav>
</div>



<div class="content">
    @if (Session::has('error'))
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <i class="bi bi-exclamation-triangle me-1"></i> {{ Session::get('error') }}.
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-center mb-4">Lengkapi Data Pengiriman di bawah ini</h5>

                    <form action="{{ route('pengiriman.store') }}" method="post">
                        @csrf
                        <input type="text" name="kode" value="" hidden>
                        <input type="text" name="id_dusun[]" value="1" hidden>

                        <div class="mb-3">
                            <label for="user_id" class="form-label">*Pengguna</label>
                            <select name="user_id" id="user_id" class="form-select">
                                @foreach ($pengguna as $item)
                                    <option value="{{ $item->id }}" {{ old('pengguna') == $item->id ? 'selected' : '' }}>
                                        {{ $item->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-12">
                            <label for="tanggal" class="form-label">*Tanggal</label>
                            <input type="date" class="form-control"id="tanggal"  name="tanggal"  value="{{old('tanggal')}}"/>
                            @error('tanggal')
                              <strong class="fw-bold d-block text-danger mt-2">
                                <small>&nbsp;* {{ $message }}</small>
                              </strong>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="desa_id" class="form-label">*Desa</label>
                            <select name="desa_id" id="desa" class="form-select">
                                @foreach ($desa as $item)
                                    <option value="{{ $item->id }}" {{ old('desa') == $item->id ? 'selected' : '' }}>
                                        {{ $item->nama }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="id_dusun" class="form-label">*Dusun</label>
                            <div class="row" id="dusun_wrapper">
                                <!-- Checkbox Dusun akan dimasukkan di sini -->
                            </div>
                        </div>

                        <div class="text-center">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<meta name="csrf-token" content="{{csrf_token()}}">

<script>
    $(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    });
    $(document).ready(function() {
    // Fungsi untuk mendapatkan dusun saat halaman dimuat pertama kali
    getDusun();

    $('#desa').on('change', function() {
        let id_desa = $(this).val();
        getDusun(id_desa);
    });

    function getDusun(id_desa = null) {
        // Jika id_desa tidak disediakan, gunakan nilai dari dropdown desa
        if (id_desa === null) {
            id_desa = $('#desa').val();
        }

        // Lakukan AJAX untuk mendapatkan dusun
        $.ajax({
            type: 'POST',
            url: "{{ route('dusun') }}",
            data: {
                id_desa: id_desa
            },
            cache: false,

            success: function(msg) {
                $('#dusun_wrapper').html(msg);
            },
            error: function(data) {
                console.log('error', data);
            }
        });
    }
});
    </script>
@endpush