@extends('lay.dnekcab.retsam')

@section('title')
  {{ $page_title }}
@endsection

@section('page-content')

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body list-heading">
                            <!-- card-header -->
                            <!--cenario 1: only header, 2:header and add button, 3:header and print, other:header , add button and prin. type:both[pdf,excel], type:[pdf], type:[excel] -->
                            <x-card-header 
                                :scenario="'1'"
                                :pageTitle="$page_title"
                            />
                           
                            <div class="card">
                                <div class="card-body">
                                    @csrf
                                    <form id="addProtocolForm" action="{{route('updateProtocol')}}" method="POST">
                                        <input type="hidden" name="editProtocolId" id="editProtocolId" value="{{ encryption($protocol->id)}}"/>
                                        <div class="col-md-12">
                                            <div class="row mb-4">
                                                <div class="col-md-12">
                                                    @php
                                                        $selectedIds = json_decode($protocol->incoming_organization, true) ?? [];
                                                    @endphp
                                                    <label for="editIncoming_organization" class="form-label">{{ __('protocol.incoming_organization') }} <span class="required">*</span></label>
                                                    <select name="r_editIncoming_organization[]" id="editIncoming_organization" multiple="multiple" class="form-control select2">
                                                        @if($Organizations)
                                                            @foreach($Organizations as $organization)
                                                                <option value="{{ $organization->id }}" @if(in_array($organization->id, $selectedIds)) selected @endif>{{ $organization->name }}</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row mb-4">
                                                <div class="col-md-3">
                                                    <label for="editProtocolDate" class="form-label">{{ __('protocol.date') }} <span class="required">*</span></label>
                                                    <input type="text" value="{{ getHijriDate($protocol->date)}}" class="form-control editProtocolDate datepickers" name="r_editProtocolDate" id="editProtocolDate" placeholder="{{ __('protocol.date') }}" autocomplete="off"/>
                                                    <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                </div>
                                                <div class="col-md-3">
                                                    <label for="editProtocolTime" class="form-label">{{ __('protocol.time') }} <span class="required">*</span></label>
                                                    <input type="time" value="{{ $protocol->entrance }}" class="form-control" name="r_editProtocolTime" id="editProtocolTime" placeholder="{{ __('protocol.time') }}"/>
                                                    <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                </div>
                                                <div class="col-md-3">
                                                    <label for="editProtocolType" class="form-label">{{ __('protocol.type') }} <span class="required">*</span></label>
                                                    <select name="r_editProtocolType" id="editProtocolType" class="form-control select2">
                                                        <option value="">--{{__('global.select')}}--</option>
                                                        <option value="official" @if($protocol->type == 'official') selected @endif>{{__('protocol.official')}}</option>
                                                        <option value="unofficial" @if($protocol->type == 'unofficial') selected @endif>{{__('protocol.unofficial')}}</option>
                                                    </select>
                                                    <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                </div>
                                                <div class="col-md-3">
                                                    <label for="protocolLocation" class="form-label">{{ __('protocol.location') }} <span class="required">*</span></label>
                                                    <input type="text" class="form-control" name="r_protocolLocation" id="protocolLocation" value="{{ $protocol->location ?? '' }}" placeholder="{{ __('protocol.location') }}"/>
                                                    <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                </div>
                                            </div>
                                            <div id="partial_view"></div>
                                            <div id="existPersonVehicle_view"></div>
                                        </div>
                                        <div class="modal-footer" id="footer-button"></div>
                                    </form>
                                </div>
                            </div>
                        
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->

        </div> <!-- container-fluid -->
    </div>

@endsection

@section('js')
    <!-- jquery step -->
    <script src="{{asset('assets/libs/jquery-steps/build/jquery.steps.min.js')}}"></script>
    <!-- form wizard init -->
    <script src="{{asset('assets/dnekcab/js/pages/form-wizard.init.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip();
            let protocol = "{{ $protocol->id }}";
        
            $('#editIncoming_organization').on('change', function() {// load leave form details if filled out
                var incomingOrganization = $(this).val();
                if(incomingOrganization != ''){

                    $.ajax({
                        url: "{{ route('load-protocol-edit-view') }}",
                        method: "GET",
                        data: { id: protocol },
                        success: function(response) {
                            $('#partial_view').html(response.viewMain);
                            $('#existPersonVehicle_view').html(response.viewPersonVehicle);
                            $('#footer-button').html(response.viewButton);
                            $(".datepickers").hijriDatePicker({
                                hijri:true,
                                showSwitcher:false,
                                isRTL:true,
                                timeZone:'Etc/UTC'
                            });
                            $(".select2").select2();
                        }
                    });

                } else {
                    $('#partial_view').html("<div class='alert alert-danger' role='alert'><i class='fa fa-exclamation-triangle' aria-hidden='true'></i>"+selectIncominOrganizationFirst+"</div>");
                }
            });

            $('#editIncoming_organization').trigger('change');

            $(document).on("submit", '#addProtocolForm', function(e){// add new leave in the system
                e.preventDefault();

                if(!validateForm('addProtocolForm')){
                    return false;
                }

                var formData = new FormData(this);

                $.ajax({
                    url: $(this).attr('action'),
                    type: "POST",
                    data: formData,
                    contentType: false,
                    cache: false,
                    processData: false,
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    success:function(result){
                        if(result.status == 'success'){
                            toastr.options =
                            {
                                "closeButton" : true,
                                "progressBar" : true
                            }
                            toastr.success(result.message);
                            $("#addProtocolForm")[0].reset();
                            setTimeout(function() {
                                    window.location.href = '{{ route("allProtocol") }}';
                            }, 2000); // 2 seconds in milliseconds (1000 milliseconds = 1 second
                        } else {
                            toastr.options =
                            {
                                "closeButton" : true,
                                "progressBar" : true
                            }
                            toastr.error(result.message);
                        }
                    },
                    error:function(result){
                        console.log(result, 'error');
                        var errors = result.responseJSON;
                        toastr.options =
                        {
                        "closeButton" : true,
                        "progressBar" : true
                        }
                        toastr.error(result.message);
                    }
                });
  
            });

            // Delete Event
            $(document).on("click", ".deleteBtn", function() {
                // Store the row element and the record ID (or any other relevant data)
                var $row = $(this).closest("tr");
                var protocolPerson_id = $(this).attr('data-id');
                var protocol_id = $(this).attr('data-protocol');
                var originalRoute = $(this).attr('data-url');
                
                var newRoute = originalRoute.replace(/_route/g, '').replace(/s/g, '');
                // Construct the URL using the new route
                var urllink = '/protocol/protocol/' + newRoute;
                
                // Show the confirmation modal
                $("#confirmModal").modal("show");

                // Add a click event listener to the "Confirm" button
                $("#confirmButton").off("click").on("click", function() {
                    // Perform AJAX request to delete the record
                    $.ajax({
                        url: urllink,
                        type: "POST",
                        data: { id: protocolPerson_id, protocol: protocol_id },
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                        },
                        success: function(response) {
                            if(response.status == 'success'){
                                $row.remove();// Remove the row from the table
                                $("#confirmModal").modal("hide"); // Hide the confirmation modal
                                toastr.options =
                                {
                                "closeButton" : true,
                                "progressBar" : true
                                }
                                toastr.success(response.message);
                            } else {
                                toastr.options =
                                {
                                "closeButton" : true,
                                "progressBar" : true
                                }
                                toastr.error(response.message);
                            }
                        },
                        error: function(error) {
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.error(error);
                            $("#confirmModal").modal("hide"); // Hide the confirmation modal
                        }
                    });
                });
            });

        });

        let personRowCount = 0; // Counter for person row identifiers
        let vehicleRowCount = 0; // Counter for vehicle row identifiers

        function addNewPersonField() {
            personRowCount++;
            const organizationOptions = `
                <option value="">--{{ __('global.select') }}--</option>
                @if($Organizations)
                    @foreach($Organizations as $organization)
                        <option value="{{ $organization->id }}">{{ $organization->name }}</option>
                    @endforeach
                @endif
            `;
            const inputFields = `
                <div class="input-container mb-4 mt-4" id="personRow_${personRowCount}">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="editPersonName_${personRowCount}" class="form-label"><span class="badge bg-info rounded-pill me-1 ms-1">${personRowCount}</span>{{ __('protocol.persons.person_name') }} <span class="required">*</span></label>
                            <input type="text" class="form-control" name="r_editPersonName[]" id="editPersonName_${personRowCount}" placeholder="{{ __('protocol.persons.person_name') }}"/>
                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                        </div>
                        <div class="col-md-3">
                            <label for="editPersonFatherName_${personRowCount}" class="form-label">{{ __('protocol.persons.person_father_name') }} <span class="required">*</span></label>
                            <input type="text" class="form-control" name="r_editPersonFatherName[]" id="editPersonFatherName_${personRowCount}" placeholder="{{ __('protocol.persons.person_father_name') }}"/>
                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                        </div>
                        <div class="col-md-3">
                            <label for="personOrganization_${personRowCount}" class="form-label">{{ __('protocol.persons.organization') }} <span class="required">*</span></label>
                            <select name="r_personOrganization[]" id="personOrganization_${personRowCount}" class="form-control select2">
                                ${organizationOptions}
                            </select>
                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                        </div>
                        <div class="col-md-3">
                            <label for="editPersonLastName_${personRowCount}" class="form-label">{{ __('protocol.persons.person_last_name') }}</label>
                            <input type="text" class="form-control" name="editPersonLastName[]" id="editPersonLastName_${personRowCount}" placeholder="{{ __('protocol.persons.person_last_name') }}"/>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-3">
                            <label for="editPersonTazkeraNumber_${personRowCount}" class="form-label">{{ __('protocol.persons.person_tazkera_number') }}</label>
                            <input type="text" class="form-control" name="editPersonTazkeraNumber[]" id="editPersonTazkeraNumber_${personRowCount}" placeholder="{{ __('protocol.persons.person_tazkera_number') }}"/>
                        </div>
                        <div class="col-md-2">
                            <label for="editPersonPhoneNumber_${personRowCount}" class="form-label">{{ __('protocol.persons.person_phone_number') }}</label>
                            <input type="text" class="form-control" name="editPersonPhoneNumber[]" id="editPersonPhoneNumber_${personRowCount}" placeholder="{{ __('protocol.persons.person_phone_number') }}"/>
                        </div>
                        <div class="col-md-3">
                             <label for="editPersonTazkeraAttachment_${personRowCount}" class="form-label">{{ __('protocol.persons.person_tazkera_attachment') }}</label>
                            <div class="custom-file">
                                <input type="file" class="form-control" name="editPersonTazkeraAttachment[]" onchange="setFileNameToFileInput(event);" id="personTazkeraAttachment_${personRowCount}" accept=".jpg, .jpeg, .png, .pdf" />
                            </div>
                        </div>
                        <div class="col-md-3">
                             <label for="editPersonImageAttachment_${personRowCount}" class="form-label">{{ __('protocol.persons.person_photo') }}</label>
                            <div class="custom-file">
                                <input type="file" class="form-control" name="editPersonImageAttachment[]" onchange="setFileNameToFileInput(event);" id="personImageAttachment_${personRowCount}" accept=".jpg, .jpeg, .png, .pdf" />
                            </div>
                        </div>
                        <div class="col-md-1">
                            <label for="personDelete_${personRowCount}" class="form-label">&nbsp;</label>
                            <button type="button" class="btn btn-danger form-control deleteButton" onclick="deletePersonRow(${personRowCount})"><i class="fa fa-trash"></i></button>
                        </div>
                    </div>
                </div>
            `;
            $('#personArea').append(inputFields);
        }

        function deletePersonRow(rowId) {
            $(`#personRow_${rowId}`).remove(); // Remove the specific row
        }

        function addNewVehicleField() {
            vehicleRowCount++;
            const inputFields = `
                <div class="input-container mb-4 mt-4" id="vehicleRow_${vehicleRowCount}">
                    <div class="row">
                        <div class="col-md-2">
                            <label for="editVehicleType_${vehicleRowCount}" class="form-label"><span class="badge bg-info rounded-pill me-1 ms-1">${vehicleRowCount}</span>{{ __('protocol.vehicles.type') }} <span class="required">*</span></label>
                            <select name="r_editVehicleType[]" id="editVehicleType_${vehicleRowCount}" onchange="getVehicles(this.value, this.id)" class="form-control select2">
                                <option value="">{{ __('global.select') }}</option>
                                <option value="car">{{__('protocol.vehicles.car') }}</option>
                                <option value="motorcycle">{{__('protocol.vehicles.motorcycle') }}</option>
                            </select>
                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                        </div>
                        <div class="col-md-2">
                            <label for="editVehicleBrand_${vehicleRowCount}" class="form-label">{{ __('protocol.vehicles.brand') }} <span class="required">*</span></label>
                            <select name="r_editVehicleBrand[]" id="editVehicleBrand_${vehicleRowCount}" class="form-control select2">
                                <option value="">{{ __('global.select') }}</option>
                            </select>
                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                        </div>
                        <div class="col-md-2">
                            <label for="editVehiclePalletNumber_${vehicleRowCount}" class="form-label">{{ __('protocol.vehicles.pallet_number') }} <span class="required">*</span></label>
                            <input type="text" class="form-control" name="r_editVehiclePalletNumber[]" id="editVehiclePalletNumber_${vehicleRowCount}" placeholder="{{ __('protocol.vehicles.pallet_number') }}"/>
                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                        </div>
                        <div class="col-md-2">
                            <label for="editVehicleColor_${vehicleRowCount}" class="form-label">{{ __('protocol.vehicles.color.header') }}<span class="required">*</span></label>
                            <select name="r_editVehicleColor[]" id="editVehicleColor_${vehicleRowCount}" class="form-control select2">
                                <option value="">{{ __('global.select') }}</option>
                                <option value="white">{{__('protocol.vehicles.color.white')}}</option>
                                <option value="black">{{__('protocol.vehicles.color.black')}}</option>
                                <option value="silver">{{__('protocol.vehicles.color.silver')}}</option>
                                <option value="gray">{{__('protocol.vehicles.color.gray')}}</option>
                                <option value="red">{{__('protocol.vehicles.color.red')}}</option>
                                <option value="blue">{{__('protocol.vehicles.color.blue')}}</option>
                                <option value="green">{{__('protocol.vehicles.color.green')}}</option>
                                <option value="yellow">{{__('protocol.vehicles.color.yellow')}}</option>
                            </select>
                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                        </div>
                        <div class="col-md-3">
                             <label for="editVehicleImage_${vehicleRowCount}" class="form-label">{{ __('protocol.vehicles.image') }}</label>
                            <div class="custom-file">
                                <input type="file" class="form-control" name="editVehicleImage[]" onchange="setFileNameToFileInput(event);" id="editVehicleImage_${vehicleRowCount}" accept=".jpg, .jpeg, .png, .pdf" />
                            </div>
                        </div>
                        <div class="col-md-1">
                            <label for="vehicleDelete__${vehicleRowCount}" class="form-label">&nbsp;</label>
                            <button type="button" class="btn btn-danger form-control deleteButton" onclick="deleteVehicleRow(${vehicleRowCount})"><i class="fa fa-trash"></i></button>
                        </div>
                    </div>
                </div>
            `;
            $('#vehicleArea').append(inputFields);
            $(".select2").select2();
        }

        function deleteVehicleRow(rowId) {
            $(`#vehicleRow_${rowId}`).remove(); // Remove the specific row
        }

        function getVehicles(vehicleType, inputId){
            var access_token = $("#access_token").val();

            var numberSplit = inputId.split('_')[1]; // Split the id by underscore and get the second part
            var inputIdNumber = parseInt(numberSplit, 10); // Convert it to an integer

            $.ajax({
                type: "GET",
                url: "{{ route('getVehiclesBrand')}}",
                data: { 
                    access_token: access_token,
                    vehicleType: vehicleType
                },
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                },
                success:function(result){
                    $('#editVehicleBrand_'+numberSplit).html(result.content);
                    $('#editVehicleBrand_'+numberSplit).trigger('change');
                },
                error:function(result){
                    var errors = result.responseJSON;
                    $('#editVehicleBrand_'+numberSplit).html(errors);
                }
            });
        }
    </script>
@endsection