@extends('layouts.content')

@section('body_content')

<main>
    <header class="page-header page-header-dark bg-gradient-primary-to-secondary pb-10">
        <div class="container-xl px-4">
            <div class="page-header-content pt-4">
                <div class="row align-items-center justify-content-between">
                    <div class="col-auto mt-4">
                        <h1 class="page-header-title">
                            <div class="page-header-icon"> <i class="fa-solid fa-users-between-lines"></i></div>
                            Business Travel Request
                        </h1>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- Main page content-->
    <div class="container-xl mt-n10 px-4">
        <div class="card mb-4">
            <div class="card-header py-2">
                <div class="row">
                    <div class="me-auto col-auto my-auto">
                        <a href="/business-travel-request" class="btn btn-primary">Back</a>
                        {{-- <button type="button" id="loadDraftButton" class="btn btn-secondary">Load Draft</button> --}}
                    </div>
                </div>
            </div>
            <form action="/business-travel-request" method="post" enctype="multipart/form-data" id="btrForm">
                @csrf
                <div class="card-body">
                    <div class="row">
                    @include('partials.alert')
                    {{-- <div class="col-6 mb-3"> --}}
                        {{-- <label>Reference</label> --}}
                        <input type="hidden" class="form-control" id="reference"
                            name="reference_number" value="{{ $countBtr + 1 }}" maxlength="255" readonly>
                    {{-- </div> --}}
                    <div class="col-md-6 mb-3">
                        <label>Initiated By</label>
                        <input type="text" class="form-control border-bottom border-1 shadow-sm"
                            value="{{ auth()->user()->name }}" maxlength="255" readonly>
                        <input type="hidden" class="form-control" id="initiated_by"
                            name="created_by" value="{{ auth()->user()->uid }}" maxlength="255" readonly>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label>Date Initiated</label>
                        <input type="text" class="form-control border-bottom border-1 shadow-sm" id="date_initiated"
                            name="date" maxlength="255" readonly>
                    </div>
                    <div class="col-12 mb-3">
                        <label>Document Title <span style="color: red">*</span></label>
                        <div class="input-group flex-nowrap">
                            <input type="text" class="form-control border-bottom border-1 shadow-sm" id="document_title" placeholder="Input Document Title"
                            name="document_title" maxlength="255" required>
                        </div>
                    </div>
                    <div class="col-12 mb-3">
                        <label>Trip Purpose <span style="color: red">*</span></label>
                        <input type="text" class="form-control border-bottom border-1 shadow-sm" id="trip_purpose" placeholder="Input Trip Purpose"
                            name="trip_purpose" maxlength="255" required>
                    </div>
                    <div class="col-6 mb-3">
                        <label>Requestor <span style="color: red">*</span></label>
                        <select class="form-control border-bottom border-1 shadow-sm" id="requestor_user_uid"
                            name="requestor_user_uid" data-live-search="true" required>
                        </select>
                    </div>
                    {{-- @dd($env) --}}
                    @if($env === "PT. Interskala Mandiri Indonesia")
                    <div class="col-6 mb-3">
                        <label>Approve By <span style="color: red">*</span></label>
                        <select class="form-control border-bottom border-1 shadow-sm" id="approve_by_uid"
                            name="manager_user_uid" data-live-search="true">
                        </select>
                    </div>
                    @endif

                    <div class="col-6 mb-3">
                        <label>Email Address</label>
                        <input type="text" class="form-control border-bottom border-1 shadow-sm" id="email"
                            name="email" maxlength="255" readonly>
                    </div>
                    <div class="col-6 mb-3">
                        <label>Division</label>
                        <input type="text" class="form-control border-bottom border-1 shadow-sm" id="division"
                            name="division" maxlength="255" readonly>
                    </div>
                    <div class="col-6 mb-3">
                        <label>Department</label>
                        <input type="text" class="form-control border-bottom border-1 shadow-sm" id="department"
                            name="department" maxlength="255" readonly>
                    </div>
                    <div class="col-6 mb-3">
                        <label>NIK KTP</label>
                        <input type="text" class="form-control border-bottom border-1 shadow-sm" id="nik"
                            name="nik" maxlength="255" readonly>
                    </div>
                    <div class="{{$env && $env === "PT. Interskala Mandiri Indonesia" ? 'col-12' : 'col-6' }} mb-3">
                        <label>Phone Number</label>
                        <input type="text" class="form-control border-bottom border-1 shadow-sm" id="phone_number"
                            name="phone_number" maxlength="255" readonly>
                    </div>
                    {{-- <div class="col-md-12 mb-3"> --}}
                        {{-- <label>Manager Name <span style="color: red">*</span></label> --}}
                        @if($env !== "PT. Interskala Mandiri Indonesia")
                        <select class="form-control"  name="manager_user_uid" id="manager_user_uid"  data-live-search="true" style="display: none;">
                            <option value="">Select Choose</option>
                            @foreach ($managerUser as $item)
                                <option value="{{ $item['uid']}}" data-division-uid="{{ $item['division_uid']}}" >{{ $item['name']}}</option>
                            @endforeach
                        </select>
                        @endif
                    {{-- </div> --}}
                    <div class="col-6 mb-3">
                        <label>Start Date <span style="color: red">*</span></label>
                        <div class="input-group flex-nowrap">
                            <input type="date" class="form-control border-bottom border-1 shadow-sm" id="start_date"
                            name="start_date" required>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <label>Return Date <span style="color: red">*</span></label>
                        <input type="date" class="form-control border-bottom border-1 shadow-sm" id="return_date"
                            name="return_date" required>
                    </div>
                    <div class="col-6 mb-3">
                        <label>Destination <span style="color: red">*</span></label>
                        <select class="form-control border-bottom border-1 shadow-sm" id="destination"
                            name="destination" required>
                            <option value="" selected>Choose destination...</option>
                            <option value="International">International</option>
                            <option value="Local">Local</option>
                        </select>
                    </div>

                    <div class="col-6 mb-3">
                        <label>Total Days</label>
                        <input type="text" class="form-control border-bottom border-1 shadow-sm" id="total_days"
                            name="total_days" required readonly>
                    </div>

                    <div class="col-6 mb-3">
                        <label>Advance Amount</label>
                        <input type="text" class="form-control border-bottom border-1 shadow-sm" id="total_amount"
                            name="total_amount" readonly>
                    </div>

                    <div class="col-6 mb-3">
                        <label>Currency <span style="color: red">*</span></label>
                        <select class="form-control border-bottom border-1 shadow-sm" id="currency-select"
                            name="currency" required>
                            <option value="" selected>Choose Currency...</option>
                            @foreach ($currency as $item)
                                <option value="{{ $item->id }}" data-name="{{ $item->name }}"  >{{ $item->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            @include('btr.create.component.passanger')
            @include('btr.create.component.trip')
            @include('btr.create.component.cost')
            @include('btr.create.component.hotel')
            <div class="p-4">
                <div class="col-md">
                    <label>File Attachment</label>
                    <input type="file" class="form-control" name="file">
                </div>
            </div>

            <div class="card-footer">
                <div class="float-end mb-3">
                    <button type="submit" id="saveData" class="btn btn-primary">Submit</button>
                    <button type="button" class="btn btn-secondary">Cancel</button>

                </div>
            </div>
        </form>

        </div>
    </div>
</main>
<script>
    const managerUser = {!! json_encode($managerUser) !!}
</script>
    <script src="/js/btr/request/_init.js"></script>
    <script src="/js/btr/request/fetchData.js"></script>
    <script src="/js/btr/request/option.js"></script>
    <script src="/js/btr/request/calculateDate.js"></script>
    <script src="/js/btr/request/SelectHotel.js"></script>
    <script src="/js/btr/request/plusHotel.js"></script>
    <script src="/js/btr/request/plusCost.js"></script>
    <script src="/js/btr/request/plusTripRouting.js"></script>
    <script src="/js/btr/request/plusPassanger.js"></script>
    <script src="/js/btr/request/submit.js"></script>
    <script>
        let isFormDirty = false;

        // Tandai form sebagai "dirty" saat ada perubahan
        document.querySelectorAll('input, textarea, select').forEach(input => {
            input.addEventListener('input', () => {
                isFormDirty = true;
            });
        });

        // Tambahkan event listener sebelum meninggalkan halaman
        window.addEventListener('beforeunload', (event) => {
            if (isFormDirty) {
                event.preventDefault();
                event.returnValue = ''; // Menampilkan dialog konfirmasi bawaan browser
            }
        });

        // Reset status "dirty" saat form dikirim
        document.querySelector('#btrForm').addEventListener('submit', () => {
            isFormDirty = false;
        });

        $("#btrForm").on('submit', function(e){
            let buttonSave = document.getElementById('saveData')
            if(this.checkValidity()){
                buttonSave.disabled = true;
                this.submit();
            }else{
                e.preventDefault()
            }
        })
    </script>
@endsection