@extends('adminlte::blank')

@section('title', 'Investment Planning Form Details')

@section('content_header')
<div class="row mb-2">
    <div class="col-sm-6">
        <h1>IPF Quick Edit View</h1>
    </div>
    <div class="col-sm-6">

    </div>
</div>
@endsection

@section('content')
@php
$formatDate = fn($date) => $date ? \Carbon\Carbon::parse($date)->format('d-m-Y') : '';
$dateConfig = ['format' => 'DD-MM-YYYY', 'autoclose' => true];
@endphp
{!! html()->form('PUT', route('IPF.view.update', base64_encode($project->id)))->id('IPFSummaryForm')->open() !!}

<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-md-12">
                {{-- Project Title --}}
                <div class="form-group">
                    {!! html()->label('Project Title <span class="text-danger">*</span>', 'project_title') !!}
                    {!! html()->text('project_title', $project->project_title)->class('form-control')->id('inputProjectTitle') !!}
                </div>

                <div class="row">
                    <div class="col-sm-4">
                        {{-- Project Status --}}
                        <div class="form-group">
                            {!! html()->label('Project Status <span class="text-danger">*</span>', 'project_status') !!}
                            {!! html()->select('project_status', ['' => 'Select Project Status'] + \App\Models\ThreatInvestmentPlanningForm::$project_statuses, $project->project_status)->class('form-control custom-select')->id('inputProjectStatus') !!}
                        </div>
                    </div>
                    <div class="col-sm-4">
                        {{-- CAC Plan Date --}}
                        <div class="form-group">
                            {!! html()->label('CAC Plan Date', 'plan_CAC_date') !!}
                            <x-adminlte-input-date name="plan_CAC_date" igroup-size="md" :config="$dateConfig"
                                value="{{ $formatDate($project->plan_CAC_date) }}" placeholder="Choose CAC Plan Date...">
                            </x-adminlte-input-date>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        {{-- PAC Plan Date --}}
                        <div class="form-group">
                            {!! html()->label('PAC Plan Date', 'plan_PAC_date') !!}
                            <x-adminlte-input-date name="plan_PAC_date" igroup-size="md" :config="$dateConfig"
                                value="{{ $formatDate($project->plan_PAC_date) }}" placeholder="Choose PAC Plan Date...">
                            </x-adminlte-input-date>
                        </div>
                    </div>

                </div>

                <div class="row">
                    <div class="col-sm-6">
                        {{-- Project Description --}}
                        <div class="form-group">
                            {!! html()->label('Project Description', 'project_description') !!}
                            {!! html()->textarea('project_description', $project->project_description)->class('form-control')->rows(5)->id('inputProjectDescription') !!}
                        </div>
                    </div>
                    <div class="col-sm-6">
                        {{-- PDL --}}
                        <div class="form-group">
                            {!! html()->label('PDL <span class="text-danger">*</span>', 'project_owner') !!}
                            {!! html()->select('project_owner', ['' => 'Select PDL'] + $activeUserList, $project->project_owner)->class('form-control')->id('inputPDL') !!}
                        </div>
                        {{-- Plan RFSU (Go Live) Date --}}
                        <div class="form-group">
                            {!! html()->label('Plan RFSU (Go Live) Date', 'plan_RFSU_go_live_date') !!}
                            <x-adminlte-input-date name="plan_RFSU_go_live_date" igroup-size="md" :config="$dateConfig"
                                value="{{ $formatDate($project->plan_RFSU_go_live_date) }}" placeholder="Choose a go live date...">
                            </x-adminlte-input-date>
                        </div>
                    </div>

                </div>

                <div class="row">
                    <div class="col-sm-6">
                        {{-- Capex OP CY Comments --}}
                        <div class="form-group">
                            {!! html()->label('Capex OP CY Comments', 'capex_op_cy_comments') !!}
                            {!! html()->textarea('capex_op_cy_comments', $project->capex_op_cy_comments)->class('form-control')->rows(5)->id('inputCapexOpCyComments') !!}
                        </div>
                    </div>
                    <div class="col-sm-6">
                        {{-- Remarks --}}
                        <div class="form-group">
                            {!! html()->label('Remarks', 'remarks') !!}
                            {!! html()->textarea('remarks', $project->remarks)->class('form-control')->rows(5)->id('inputRemarks') !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-12 d-flex justify-content-between">
                <a href="javascript:void(0)" onclick="window.close()" class="btn btn-secondary">Cancel</a>

                <div class="d-flex">
                    <button type="button" id="editIPFSummaryBtn" class="btn btn-primary mr-2">
                        Edit Details
                    </button>
                    <button type="submit" id="submitIPFSummaryBtn" class="btn btn-success float-right" disabled>
                        <span id="submitIPFSummaryText">Save Changes</span>
                        <span id="submitIPFSummarySpinner" class="spinner-border spinner-border-sm ml-2" role="status"
                            style="display: none;"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{!! html()->form()->close() !!}
@endsection

@push('js')
<script>
    $(function() {
        const $form = $('#IPFSummaryForm');

        $('#inputProjectStatus, #inputPDL').select2({
            placeholder: 'Select',
            theme: 'bootstrap4',
            allowClear: true,
            width: '100%',
        });

        function toggleFields(enable) {
            $form.find('input, select, textarea').prop('disabled', !enable);
        }

        // Default to view (read-only) mode
        toggleFields(false);

        $('#editIPFSummaryBtn').on('click', function() {
            toggleFields(true);
            $('#submitIPFSummaryBtn').removeAttr('disabled');
            $(this).addClass('d-none');
        });

        $form.on('submit', function(e) {
            e.preventDefault();

            $('#submitIPFSummaryBtn').attr('disabled', true);
            $('#submitIPFSummarySpinner').show();

            $.ajax({
                url: $form.attr('action'),
                type: 'PUT',
                data: $form.serialize(),
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                success: function(response) {
                    Swal.fire({
                        toast: true,
                        icon: 'success',
                        title: response.message || 'Investment Planning Form updated successfully!',
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true,
                    });
                    setTimeout(function() {
                        if (window.opener && !window.opener.closed && window.opener.$ && window.opener.$('#IPF_table').length) {
                            window.opener.$('#IPF_table').DataTable().ajax.reload(null, false);
                        }
                        window.close();
                    }, 1500);
                },
                error: function(xhr) {
                    let msg = (xhr.responseJSON && xhr.responseJSON.message) || 'Unable to save changes. Please try again.';
                    let errors = xhr.responseJSON && xhr.responseJSON.errors;

                    if (errors) {
                        let firstKey = Object.keys(errors)[0];
                        msg = errors[firstKey][0];
                    }

                    Swal.fire({
                        toast: true,
                        icon: 'error',
                        title: msg,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 5000,
                        timerProgressBar: true,
                    });
                },
                complete: function() {
                    $('#submitIPFSummaryBtn').attr('disabled', false);
                    $('#submitIPFSummarySpinner').hide();
                }
            });
        });
    });
</script>
@endpush