@extends('lay.dnekcab.retsam')

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

@section('css')
    <style>
        blockquote {
            border-left: 5px solid #4f46e5; /* Indigo border */
            background: #f9fafb;
            padding: 1rem 1.5rem;
            margin: 1.5rem 0;
            font-style: italic;
            color: #374151;
            border-radius: 0.5rem;
            position: relative;
        }
        blockquote::before {
            content: "“";
            font-size: 3rem;
            color: #9ca3af;
            position: absolute;
            left: 10px;
            top: -10px;
        }

        /* Base blockquote style */
        /* Progressive indentation with RTL/LTR support */
        ul ul {
            margin-inline-start: 1.5rem; /* works for both LTR & RTL */
        }
        ul ul ul {
            margin-inline-start: 2.5rem;
        }
        ul ul ul ul {
            margin-inline-start: 3.5rem;
        }

        /* Blockquote indentation */
        .custom-blockquote {
            border-inline-start: 5px solid #4f46e5; /* border follows text direction */
            background: #f9fafb;
            padding: 0.75rem 1rem;
            margin: 0.75rem 0 0.75rem 1rem;
            font-style: italic;
            color: #374151;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
            position: relative;
        }

        /* Decorative quotation mark */
        .custom-blockquote::before {
            content: "“";
            font-size: 2rem;
            color: #9ca3af;
            position: absolute;
            inset-inline-start: 8px; /* replaces left for RTL/LTR auto */
            top: -10px;
        }
        .bg-lightblue {
            background: #e0f2fe;
            border-inline-start-color: #0284c7;
        }

        .decission{
            border:2px solid #ccc;
        }
        select{
            background-position: left .75rem center !important;
            padding: 10px !important;
        }
        .form-label{
            font-weight: bold;
        }
        .incoming-letter p{
            font-weight: normal !important;
        }
        .incoming-letter select{
            background-position: left 0.5em center;
            padding: 7px 10px;
        }
        #confirm-modal button i, #share-letter-modal button i{
            position: relative; top: 3px;
        }
        .share-to-expert-section{
            display: none;
        }
        .select2-container {
            z-index: 9999;
        }
        /* استایل‌های اصلی برای پنل بوت‌استرپ */
        .panel {
            margin-bottom: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: 0 1px 1px rgba(0,0,0,.05);
        }

        .panel-heading {
            padding: 10px 15px;
            border-bottom: 1px solid #ddd;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            font-size: 16px;
            font-weight: bold;
            background-color: #f5f5f5;
            color: #333;
        }

        .panel-body {
            padding: 15px;
        }

        .panel-default {
            border-color: #ddd;
        }

        .panel-default > .panel-heading {
            background-color: #f5f5f5;
            border-color: #ddd;
        }

        .panel-default > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #ddd;
        }

        .panel-footer {
            padding: 10px 15px;
            background-color: #f5f5f5;
            border-top: 1px solid #ddd;
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px;
        }
        @media print {
            .no-print {
                display: none !important;
            }
            .print-section {
                display: block !important;
            }
            .modal {
                position: relative !important;
                display: block !important;
                overflow: visible !important;
            }
            .modal, .modal-backdrop {
                display: none !important;
            }
        }

        @media screen {
            .print-section {
                display: none;
            }
        }

        #print-section{
            width: 100%;
            margin: 0 auto;
            text-align: center;
        }
        #logo img{
            width: 200px;
        }
        #letter-details-model .modal-header{
            background-image: linear-gradient(#272727, #3f3f3f, #272727);
            padding: 10px 20px
        }
        #letter-details-model h5{
            font-size: 20px;
            color: #FFF;
        }
        #letter-details-model .modal-header button{
            background: transparent;
            color: #FFF;
            outline: none !important;
            border: 0;
            font-size: 33px;
            padding: 0;
            margin: 0;
            position: absolute;
            left: 18px;
        }
        .answer-to .select2-container{
            z-index: 99;
        }
        .letter-footer td{
            padding-top: 10px;
        }
        .letter-footer span{
            font-size: 12px;
        }
        .note-editor .note-toolbar .note-color-all .note-dropdown-menu, .note-popover .popover-content .note-color-all .note-dropdown-menu {
            min-width: 342px !important;
        }
        .note-editor .note-toolbar .note-para .note-dropdown-menu, .note-popover .popover-content .note-para .note-dropdown-menu {
            min-width: 248px !important;
        }
        
        button[title="More Color"]::after {
            content: "▼"; /* یا "\f0d7" با Font Awesome */
            position: absolute;
            right: 4px;
            top: 51%;
            transform: translateY(-50%);
            font-size: 10px;
            pointer-events: none;
        }
        .note-toolbar button:hover {
            color: #000;
        }
        .note-editor {
            border-radius: 0 !important;
            box-shadow: none !important;
            margin-bottom: 0 !important;
        }
        .note-editor:hover {
            box-shadow: none !important;
            transform: translateY(0px) !important;
        }
        .note-editable p{
            margin-bottom: 3px !important;
        }
    </style>
@endsection

@section('page-content')
    <div class="page-content no-print">
        <div class="container-fluid">
            <!-- end view-->
            @if(auth()->user()->hasPermissionTo('Application - Edit Application'))
                <!-- edit -->
                <div class="card data-table mb-3 edit-application">
                    <div class="card-header">
                        <label class="card-title"><i class="fa fa-user"></i> {{ __('application.edit_application')}}</label>
                    </div>
                    <div class="card-body">

                        @php
                            $year = (int)substr($application->date, 0, 4);
                            if ($year >= 1900 && $year <= 2100) {
                                // Gregorian → convert to Hijri
                                $convertedDate = getHijriDate($application->date);
                            } elseif ($year >= 1300 && $year <= 1600) {
                                // Hijri → convert to Gregorian
                                $convertedDate = $application->date;
                            } else {
                                // Unknown / invalid date format
                                $convertedDate = null;
                            }
                        @endphp     
                        @csrf
                        <form id="editApplicationForm" action="{{ route('updateApplication')}}" method="POST" enctype="multipart/form-data">
                            <input type="hidden" name="update_id" id="update_id" value="{{ encryption($application->id) }}" class="form-control" />
                            <div class="row">
                                <div class="col-12 mb-2">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="date" class="form-label">{{ __('application.date') }} <span class="required">*</span></label>
                                            <input type="text" class="form-control datepickers" name="date" id="date" placeholder="{{ __('application.date') }}" value="{{ $convertedDate }}" autocomplete="off"/>
                                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                        </div>
                    
                                        <div class="col-md-6">
                                            <label for="number">{{ __('application.number') }} <span class="required">*</span></label>
                                            <input type="number" class="form-control" name="number" id="number" placeholder="{{ __('application.number') }}" value="{{ $application->number }}" />
                                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                        </div>
                    
                                    </div>
                                </div>
        
                                <div class="col-12 mb-2">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="name" class="form-label">{{ __('application.name') }} <span class="required">*</span></label>
                                            <input type="text" class="form-control" name="name" id="name" placeholder="{{ __('application.name') }}" value="{{ $application->name }}" autocomplete="off"/>
                                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                        </div>
                    
                                        <div class="col-md-6">
                                            <label for="phone" class="form-label">{{ __('application.phone') }}</label>
                                            <input type="text" class="form-control" name="phone" id="phone" placeholder="{{ __('application.phone') }}" value="{{ $application->phone }}" autocomplete="off"/>
                                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                        </div>
                                    </div>
                                </div>
        
                                <div class="col-12 mb-2">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="province_id" class="form-label">{{ __('application.province') }}</label>
                                            <select name="province_id" id="province_id" class="form-control select2">
                                                <option value="">--{{ __('application.province') }}--</option>
                                                @if($provinces)
                                                    @foreach($provinces as $province)
                                                        <option value="{{ $province->id }}" @if($application->province_id == $province->id) selected @endif>{{ $province->name_fa}}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                        </div>
        
                                        <div class="col-md-6">
                                            <label for="district_id" class="form-label">{{ __('application.district') }}</label>
                                            <select name="district_id" id="district_id" class="form-control select2"></select>
                                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 mb-2">
                                    <div class="row">
                                        
                                        <div class="col-md-6">
                                            <label for="village_id" class="form-label">{{ __('application.village') }}</label>
                                            <select name="village_id" id="village_id" class="form-control select2">
                                                <option value="">--{{ __('application.village') }}--</option>
                                                
                                            </select>
                                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                        </div>
        
                                        <div class="col-md-6">
                                            <label for="address" class="form-label">{{ __('application.address') }}</label>
                                            <input type="text" class="form-control" name="address" id="address" value="{{ $application->address }}" placeholder="{{ __('application.address') }}" autocomplete="off"/>
                                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                        </div>
                                    </div>
                                </div>
        
                                <div class="col-12 mb-2">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="occupation" class="form-label">{{ __('application.occupation') }}</label>
                                            <input type="text" class="form-control" name="occupation" id="occupation" value="{{ $application->occupation }}" placeholder="{{ __('application.occupation') }}" autocomplete="off"/>
                                        </div>
                    
                                        <div class="col-md-6">
                                            <label for="application_type" class="form-label">{{ __('application.application_type') }}</label>
                                             <select class="form-control select2" name="type" id="type">
                                                @foreach(__('application.application_types') as $type)
                                                    <option value="{{ $type }}" 
                                                        @if((string) $application->type === (string) $type) selected @endif>
                                                        {{ $type }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                        </div>
                                    </div>
                                </div>
        
                                <div class="col-12 mb-2">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="reference" class="form-label">{{ __('application.reference') }} </label>
                                            <input type="text" class="form-control" name="reference" id="reference" value="{{ $application->reference }}" placeholder="{{ __('application.reference') }}" autocomplete="off"/>
                                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                        </div>
                    
                                        <div class="col-md-6">
                                            <label for="organization" class="form-label">{{ __('application.organization') }} </label>
                                            <input type="text" class="form-control" name="organization" id="organization" value="{{ $application->organization }}" placeholder="{{ __('application.organization') }}" autocomplete="off"/>
                                            <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                        </div>
                                    </div>
                                </div>
        
                                <div class="col-12 mb-2">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <label for="description" class="form-label">{{ __('application.description') }}</label>
                                            <textarea name="description" id="description" cols="5" rows="2" class="form-control">{{ $application->description }}</textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 mb-3">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label for="attachment" class="form-label">{{ __('application.attachment') }} <span class="editIDCardAttachmentDiv hiddens"><a href="" class="editAttachment" target="_blank"></a></span></label>
                                            <div class="custom-file">
                                                <input type="file" class="form-control" name="attachment" onchange="setFileNameToFileInput(event);" id="attachment" accept=".jpg, .jpeg, .png, .pdf" />
                                            </div>
                                        </div>

                                        @if(!empty($application->attachment))
                                        <div class="col-md-4">
                                            <label for="attachment" class="form-label">{{ __('application.download_attachment') }}</label>
                                            <div class="custom-file">
                                                <a href="{{ asset('assets/attachment/applications/'.$application->attachment) }}" target="_blank" class="btn btn-secondary btn-block"><i class="fa fa-download"></i> {{ __('application.download_attachment') }}</a>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                </div>
            
                                <hr>
                                <div class="col-md-12">
                                    <div class="flex-grow-1">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <button type="submit" class="btn btn-primary pull-{{ app()->getLocale() == 'en' ? 'right' : 'left' }} m{{ app()->getLocale() == 'en' ? 's' : 'e' }}-2">{{ __('global.update')}}</button>
                                                <a type="button" class="btn btn-dark pull-{{ app()->getLocale() == 'en' ? 'right' : 'left' }}" href="{{ route('allPendingApplication')}}">{{ __('global.back')}}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
                <!-- end edit -->
            @endif
        </div>

    </div>
@endsection
@section('js')
    <script>

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).ready(function(){

            $(document).on('submit', '#editApplicationForm', function(e) {
                e.preventDefault();
                var id = $('#update_id').val();
                if(!validateForm('editApplicationForm')){
                    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() }}"  // Set the CSRF token in the request headers
                    },
                    success: function(response) {
                        if(response.status == 'success'){
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.success(response.message);
                            setTimeout(function() {
                                // Go back one step in the browser history
                                window.history.back();

                                // Refresh the current page
                                window.location.reload();
                            }, 3000); // 3 seconds in milliseconds (1000 milliseconds = 1 second)
                            // Handle success response
                        } else {
                            console.log(response);
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle error response
                        toastr.options =
                        {
                        "closeButton" : true,
                        "progressBar" : true
                        }
                        toastr.error(error);
                    }
                });
            
            });

            $(document).on('change', '#province_id', function(e) {
                var access_token = $("#access_token").val();
                var province = $("#province_id option:selected").val();
                var main_district = "{{ $application->district_id }}";

                $.ajax({
                    type: "GET",
                    url: "{{ route('getDistricts')}}",
                    data: { 
                        access_token: access_token,
                        province: province,
                        district: main_district
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success:function(result){
                        $('#district_id').html(result.content);
                        $('#district_id').trigger('change');
                    },
                    error:function(result){
                        var errors = result.responseJSON;
                        $('#district_id').html(errors);
                    }
                });
            });

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

            $(document).on('change', '#district_id', function(e) {
                var access_token = $("#access_token").val();
                var district = $("#district_id option:selected").val();
                var main_village = "{{ $application->village_id }}";

                $.ajax({
                    type: "GET",
                    url: "{{ route('getVillages')}}",
                    data: { 
                        access_token: access_token,
                        district: district,
                        village: main_village
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success:function(result){
                        console.log(result.content);
                        
                        $('#village_id').html(result.content);
                        $('#village_id').trigger('change');
                    },
                    error:function(result){
                        var errors = result.responseJSON;
                        $('#village_id').html(errors);
                    }
                });
            });

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

        });

    </script>
@endsection