@extends('layouts.admin')

@section('content')
    <div class="card shadow-sm">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h4>Detail Renja: {{ $renja->perangkatDaerah->nama_pd }} ({{ $renja->periode }})</h4>
            <div class="">
                <button class="btn btn-primary btn-sm" onclick="editRenja({{ $renja->id }})"><i class="fa fa-edit"></i> Edit
                    Renja</button>
                <a href="{{ route('renja.index') }}" class="btn btn-info btn-sm"><i class="fa fa-arrow-left"></i> Kembali</a>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-5">
                    <div class="card shadow-sm">
                        <div class="card-header bg-primary text-white d-flex justify-content-between">
                            <span>Daftar Program</span>
                            <button class="btn btn-light btn-xs" onclick="addProgram()">+ Tambah Program</button>
                        </div>
                        <div class="card-body">
                            <table class="table table-sm">
                                @foreach ($renja->programs as $p)
                                    <tr>
                                        <td>{{ $p->program }}</td>
                                        <td width="50px">
                                            <button class="btn btn-link text-info p-0"
                                                onclick="editProgram({{ $p->id }})"><i
                                                    class="fa fa-edit"></i></button>
                                            <button class="btn btn-link text-danger p-0"
                                                onclick="deleteProgram({{ $p->id }})"><i
                                                    class="fa fa-trash"></i></button>
                                        </td>
                                    </tr>
                                @endforeach
                            </table>
                        </div>
                    </div>
                </div>

                <div class="col-md-7">
                    <div class="card shadow-sm">
                        <div class="card-header bg-success text-white d-flex justify-content-between">
                            <span>Daftar Kegiatan</span>
                            <button class="btn btn-light btn-xs" onclick="addKegiatan()">+ Tambah Kegiatan</button>
                        </div>
                        <div class="card-body">
                            <table class="table table-sm table-bordered">
                                <thead>
                                    <tr>
                                        <th>Kegiatan</th>
                                        <th>Target</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($renja->kegiatans as $k)
                                        <tr>
                                            <td>{{ $k->kegiatan }}</td>
                                            <td>{{ $k->target }}</td>
                                            <td>
                                                <button class="btn btn-link text-info p-0"
                                                    onclick="editKegiatan({{ $k->id }})"><i
                                                        class="fa fa-edit"></i></button>
                                                <button class="btn btn-link text-danger p-0"
                                                    onclick="deleteKegiatan({{ $k->id }})"><i
                                                        class="fa fa-trash"></i></button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalKegiatan" tabindex="-1">
        <div class="modal-dialog">
            <form id="formKegiatan">
                @csrf
                <input type="hidden" name="id" id="keg_id">
                <input type="hidden" name="renja_id" value="{{ $renja->id }}">
                <div class="modal-content">
                    <div class="modal-body">
                        <label>Nama Kegiatan</label>
                        <textarea name="kegiatan" id="keg_nama" class="form-control" required></textarea>
                        <label class="mt-2">Target</label>
                        <input type="text" name="target" id="keg_target" class="form-control" required>
                    </div>
                    <div class="modal-footer py-1">
                        <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-success btn-sm">Simpan</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="modalProgram" tabindex="-1">
        <div class="modal-dialog">
            <form id="formProgram">
                @csrf
                <input type="hidden" name="id" id="prog_id">
                <input type="hidden" name="renja_id" value="{{ $renja->id }}">
                <div class="modal-content">
                    <div class="modal-body">
                        <label>Nama Program</label>
                        <input type="text" name="nama_program" id="prog_nama" class="form-control" required>
                    </div>
                    <div class="modal-footer py-1">
                        <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary btn-sm">Simpan</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="modalRenja" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <form id="formRenja">
                @csrf
                <input type="hidden" name="renja_id" value="{{ $renja->id }}">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6>Edit Renja</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label>Periode</label>
                                <input type="text" name="periode" id="periode" class="form-control" placeholder="2026" required>
                            </div>
                        </div>
                        @can('akses-semua-perangkat-daerah')
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label>Perangkat Daerah</label>
                                    <select name="perangkat_daerah_id" id="pd_id" class="form-select" required>
                                        <option value="">-- Pilih PD --</option>
                                        @foreach ($list_pd as $pd)
                                            <option value="{{ $pd->id }}">{{ $pd->nama_pd }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        @endcan
                    </div>
                    <div class="modal-footer"><button type="submit" class="btn btn-primary">Simpan</button></div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#pd_id').select2({
                dropdownParent: $('#modalRenja'),
                width: '100%',
                placeholder: 'Pilih Perangkat Daerah',
                theme: 'bootstrap-5'
            });

            window.editRenja = function(id) {
                $.get("/renja/" + id + "/edit", function(data) {
                    $('#renja_id').val(data.id);
                    $('#periode').val(data.periode);
                    $('#pd_id').val(data.perangkat_daerah_id).trigger('change');
                    $('#modalRenja').modal('show');
                });
            }

            $('#formRenja').submit(function(e) {
                e.preventDefault();
                $.ajax({
                    url: "{{ route('renja.update') }}",
                    type: "POST",
                    data: $(this).serialize(),
                    success: function(res) {
                        $('#modalRenja').modal('hide');
                        Swal.fire('Berhasil', res.success, 'success').then(() => location
                            .reload());
                    }
                });
            });

            // AJAX EDIT KEGIATAN
            window.editKegiatan = function(id) {
                $.get("/renja/kegiatan/" + id + "/edit", function(data) {
                    $('#keg_id').val(data.id);
                    $('#keg_nama').val(data.kegiatan);
                    $('#keg_target').val(data.target);
                    $('#modalKegiatan').modal('show');
                });
            }

            window.addProgram = function() {
                $('#prog_id').val('');
                $('#formProgram')[0].reset();
                $('#modalProgram').modal('show');
            }

            // AJAX EDIT PROGRAM
            window.editProgram = function(id) {
                $.get("/renja/program/" + id + "/edit", function(data) {
                    $('#prog_id').val(data.id);
                    $('#prog_nama').val(data.program);
                    $('#modalProgram').modal('show');
                });
            }

            window.deleteProgram = function(id) {
                Swal.fire({
                    title: 'Hapus Program?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    confirmButtonText: 'Ya, Hapus'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "/renja/program/" + id,
                            type: "DELETE",
                            data: {
                                _token: "{{ csrf_token() }}"
                            },
                            success: function(res) {
                                location.reload();
                            }
                        });
                    }
                });
            }

            window.addKegiatan = function() {
                $('#keg_id').val('');
                $('#formKegiatan')[0].reset();
                $('#modalKegiatan').modal('show');
            }

            window.deleteKegiatan = function(id) {
                Swal.fire({
                    title: 'Hapus Kegiatan?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    confirmButtonText: 'Ya, Hapus'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "/renja/kegiatan/" + id,
                            type: "DELETE",
                            data: {
                                _token: "{{ csrf_token() }}"
                            },
                            success: function(res) {
                                location.reload();
                            }
                        });
                    }
                });
            }

            // $('#formKegiatan, #formProgram').submit(function(e) {
            //     e.preventDefault();
            //     let url = $(this).attr('id') == 'formKegiatan' ? "{{ route('renja.store-kegiatan') }}" :
            //         "{{ route('renja.store-program') }}";
            //     $.post(url, $(this).serialize(), function(res) {
            //         location.reload();
            //     });
            // });
            $('#formKegiatan').submit(function(e) {
                e.preventDefault();
                $.ajax({
                    url: "{{ route('renja.store-kegiatan') }}",
                    type: "POST",
                    data: $(this).serialize(),
                    success: function(res) {
                        $('#modalKegiatan').modal('hide');
                        Swal.fire('Berhasil', res.success, 'success').then(() => location
                            .reload());
                    }
                });
            });
            $('#formProgram').submit(function(e) {
                e.preventDefault();
                $.ajax({
                    url: "{{ route('renja.store-program') }}",
                    type: "POST",
                    data: $(this).serialize(),
                    success: function(res) {
                        $('#modalProgram').modal('hide');
                        Swal.fire('Berhasil', res.success, 'success').then(() => location
                            .reload());
                    }
                });
            });
        });
    </script>
@endpush