@extends('admin.layouts.layouts')

@section('title', 'Appointment Letter Template')

@section('content')
    <div class="page-header">
        <h3 class="page-title">Appointment Letter</h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item">CMS</li>
                <li class="breadcrumb-item" aria-current="page">Appointment Letter</li>
            </ol>
        </nav>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                {!! Form::open([
                    'route' => 'appointment-letter.store',
                    'method' => 'POST',
                    'id' => 'template-form',
                    'class' => 'forms-sample',
                    'enctype' => 'multipart/form-data',
                ]) !!}

                @csrf
                {{ Form::hidden('id', $currentTemplate->id ?? '') }}

                <div class="card-body">
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('effective_date', 'Effective From', ['class' => 'form-label']) !!}
                            <span class="text-danger">*</span>
                            {!! Form::month(
                                'effective_date',
                                old(
                                    'effective_date',
                                    isset($currentTemplate?->effective_date) ? date('Y-m', strtotime($currentTemplate?->effective_date)) : '',
                                ),
                                [
                                    'class' => 'form-control',
                                    'required' => true,
                                    'data-parsley-required' => true,
                                    'data-parsley-required-message' => 'Please select effective from',
                                    'data-parsley-errors-container' => '#effective_date_error',
                                ],
                            ) !!}
                            <span class="text-danger" id="effective_date_error"></span>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            {!! Form::label('template_content', 'Template Content', ['class' => 'form-label']) !!}
                            <span class="text-danger">*</span>
                            {!! Form::textarea('template_content', old('template_content', $currentTemplate?->description ?? ''), [
                                'class' => 'form-control',
                                'rows' => 6,
                                'placeholder' => 'Enter Appointment Template Content',
                                'data-parsley-required' => true,
                                'data-parsley-trigger' => 'keyup',
                                'data-parsley-required-message' => 'Please enter appointment letter template content.',
                                'data-parsley-errors-container' => '#template_content_error',
                            ]) !!}
                            <span class="text-danger"
                                id="template_content_error">{{ $errors->first('template_content') }}</span>
                        </div>
                    </div>
                </div>

                <div class="card-footer">
                    {!! Form::button('Update', [
                        'type' => 'submit',
                        'class' => 'btn btn-primary mr-2',
                        'id' => 'update-template-btn',
                    ]) !!}
                </div>

                {{ Form::close() }}
            </div>
        </div>
    </div>

    <div class="container py-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">Template History</h5>
            </div>
            <div class="card-body">
                @if ($templates->isEmpty())
                    <p style="text-align: center; font-weight: bold;">Template records not found!</p>
                @else
                    <div class="table-responsive">
                        <table class="table table-hover" id="histories-table">
                            <thead>
                                <tr>
                                    <th>Effective Month</th>
                                    <th>Created At</th>
                                    <th>Created By</th>
                                    <th>Updated At</th>
                                    <th>Updated By</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($templates as $template)
                                    <tr>
                                        <td>{{ date('F, Y', strtotime($template->effective_date)) }}</td>
                                        <td>{{ $template->created_at->format('d-m-Y') }}</td>
                                        <td>{{ $template->createdBy->name ?? '-' }}</td>
                                        <td>
                                            {{ isset($template->updated_at) ? $template->updated_at->format('d-m-Y') : '-' }}
                                        </td>
                                        <td>{{ isset($template->updated_at) ? $template->updatedBy->name : '-' }}</td>
                                        <td>
                                            @can('appointment-letter-template-view')
                                                <a href="{{ route('appointment-letter.show', $template->id) }}"
                                                    class="btn btn-icon btn-dark">
                                                    <i class="fa fa-eye"></i>
                                                </a>
                                            @endcan
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        var storeRoute = "{{ route('appointment-letter.store') }}";

        // Ck Editor Code
        CKEDITOR.replace("template_content", {
            height: '400px'
        });

        CKEDITOR.on("instanceReady", function() {
            $.each(CKEDITOR.instances, function(instance) {
                CKEDITOR.instances[instance].on("change", function(e) {
                    for (instance in CKEDITOR.instances) {
                        CKEDITOR.instances[instance].updateElement();
                    }
                });
            });
        });

        $(document).ready(function() {
            $('#histories-table').DataTable({
                "paging": true,
                "searching": true,
                "info": true,
                "autoWidth": false,
                "pageLength": 10,
                "columnDefs": [{
                    orderable: false,
                    targets: '_all'
                }, ]
            });

            $("#template-form").parsley();
            $('#template-form').on('submit', function(e) {
                e.preventDefault();

                if ($("#template-form").parsley().isValid()) {
                    let formData = new FormData(this);

                    // Show loading indicator
                    $('#update-template-btn').prop('disabled', true).html(
                        '<i class="fas fa-spinner fa-spin"></i> Updating...');

                    $.ajax({
                        url: storeRoute,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if (response.success) {
                                toastr.success(response.message);
                                setTimeout(function() {
                                    window.location.reload();
                                }, 3000);
                            } else {
                                toastr.error(response.message);
                            }
                        },
                        error: function(response) {
                            $('.text-danger').text('');
                            $.each(response.responseJSON.errors, function(field, messages) {
                                $('#' + field + '_error').text(messages[0]);
                            });
                        },
                        complete: function() {
                            $('#update-template-btn').prop('disabled', false).html('Update');
                        }
                    });
                } else {
                    return false;
                }
            });
        });
    </script>
@endsection