@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render(request()->route()->getName()) }}
@endsection

@section('content')
    @push('style')
        <style>
            .add-new-bg {
                background-image: url('/assets/media/images/2600x1200/bg-4.png');
            }

            .dark .add-new-bg {
                background-image: url('/assets/media/images/2600x1200/bg-4-dark.png');
            }
        </style>
    @endpush

    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
        <div class="card">
            <div class="card-header" id="advanced_settings_appearance">
                <h3 class="card-title">
                    Surveyor
                </h3>
                <div class="flex items-center gap-2">
                    <a href="{{ route('surveyor.index') }}" class="btn btn-xs btn-info"><i class="ki-filled ki-exit-left"></i>
                        Back</a>
                </div>
            </div>
            <div class="card-body lg:py-7.5 grid grid-cols-3">
                <div class="mb-5">
                    <h3 class="text-md font-medium text-gray-900">
                        Nomor Register Permohonan:
                    </h3>
                    <span class="text-2sm text-gray-700">
                        {{ $permohonan->nomor_registrasi }}
                    </span>
                </div>

                <div class="mb-5">
                    <h3 class="text-md font-medium text-gray-900">
                        Waktu Survei:
                    </h3>
                    <span class="text-2sm text-gray-700">
                        {{ $permohonan->penilaian->tanggal_kunjungan }}
                    </span>
                </div>

                <div class="mb-5">
                    <h3 class="text-md font-medium text-gray-900">
                        Keterangan:
                    </h3>
                    <span class="text-2sm text-gray-700">
                        {{ $permohonan->penilaian->keterangan }}
                    </span>
                </div>
            </div>
        </div>

        @include('lpj::component.detail-jaminan',['backLink'=>'surveyor.index'])

        <div class="card min-w-full py-2 px-2">
            <div class="card-header" id="basic_settings">
                <div class="card-title flex flex-row gap-1.5">
                    <a href="{{ route('surveyor.show', array_merge(request()->query(), ['id' => $surveyor, 'form' => 'inspeksi'])) }}"
                        class="btn btn-xs {{ request()->has('form') && request('form') == 'inspeksi' ? 'btn-outline btn-primary' : 'btn-light' }}">FORM
                        INSPEKSI</a>

                    <a href="{{ route('surveyor.show', array_merge(request()->query(), ['id' => $surveyor, 'form' => 'denah'])) }}"
                        class="btn btn-xs {{ request()->has('form') && request('form') == 'denah' ? 'btn-outline btn-primary' : 'btn-light' }}">DENAH
                        TANAH DAN BANGUNAN</a>

                    <a href="{{ route('surveyor.show', array_merge(request()->query(), ['id' => $surveyor, 'form' => 'foto'])) }}"
                        class="btn btn-xs {{ request()->has('form') && request('form') == 'foto' ? 'btn-outline btn-primary' : 'btn-light' }}">FOTO</a>

                    {{-- <a href="{{ route('surveyor.show', array_merge(request()->query(), ['id' => $surveyor, 'form' => 'data-pembanding'])) }}"
                        class="btn btn-xs {{ request()->has('form') && request('form') == 'data-pembanding' ? 'btn-outline btn-primary' : 'btn-light' }}">DATA
                        PEMBANDING</a> --}}
                </div>
            </div>

            <div class="card-body">
                @if (request()->has('form') && request('form') == 'denah')
                    @include('lpj::surveyor.components.card-tambah')
                    {{-- @elseif(request()->has('form') && request('form') == 'data-pembanding')
                    @include('lpj::surveyor.components.data-pembanding') --}}
                @elseif(request()->has('form') && request('form') == 'foto')
                    @include('lpj::surveyor.components.card-tambah')
                @else
                    @include('lpj::surveyor.components.card-tambah')
                @endIf
            </div>

            <div class="card-footer ">
                <div class="flex gap-5">
                    <button type="button" id="btnProses" class="btn btn-success">
                        Proses
                    </button>
                    <button type="button" id="btnSubmit" class="btn btn-primary">
                        Submit
                    </button>
                </div>
            </div>

        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            checkButtonStatus();

            document.getElementById('btnProses').addEventListener('click', onProses);
            document.getElementById('btnSubmit').addEventListener('click', onSubmit);
        });

        function checkButtonStatus() {
            $.ajax({
                url: "{{ route('surveyor.checkButtonStatus', ['id' => $surveyor]) }}",
                type: "GET",
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.buttonDisable) {
                        $('#btnProses, #btnSubmit').prop('disabled', true);
                    } else {
                        $('#btnProses, #btnSubmit').prop('disabled', false);
                    }
                },
                error: function(xhr, status, error) {
                    console.log('Error checking button status:', error, status, xhr);
                }
            });
        }

        function onProses() {
            return alert('Are you sure you want to submit?');
        }

        function onSubmit() {
            $.ajax({
                url: "{{ route('surveyor.submitSurveyor', ['id' => $surveyor]) }}",
                type: "GET",
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        window.location.href = "{{ route('surveyor.index') }}";
                    }
                },
                error: function(xhr, status, error) {
                    console.log('Error checking button status:', error, status, xhr);
                }
            });
        }




        $('.card-title a').on('click', function(e) {
            e.preventDefault();
            var url = $(this).attr('href');

            $.get(url, function(response) {
                $('.card-body').html(response);
            });
        });
    </script>
@endpush