@extends('admin.layout.master')
@section('title', 'Purchase contract')
@section('custom_style')
    <style>
        label {
            font-size: 13px;
        }

        #form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        #contract_details {
            margin: 0;
            padding: 10px 5px;
            background-color: #f3f4f6;
            border-radius: 8px;
            /* box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); */
            border: 1px solid #ccc;
        }

        .contract_group {
            display: flex;
            flex-direction: row;
            margin-bottom: 5px;
        }

        .contract_group label {
            white-space: nowrap;
            min-width: 150px;
        }

        .terms_and_conditions p {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .terms_and_conditions input[type="text"] {
            flex-grow: 1;
            margin: 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .party_info {
            display: flex;
            flex-direction: row;
            gap: 5px;
        }

        .party_info input[type="text"] {
            flex-grow: 1;
            margin: 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .party_info label {
            white-space: nowrap;
            min-width: 150px;
        }

        .payment_schedule .card {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f3f4f6;
            border-radius: 8px !important;
            /* box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); */
        }

        .table-bordered {
            border: 1px solid #ccc !important;
        }

        @media (max-width: 600px) {
            .terms_and_conditions p {
                flex-direction: column;
                align-items: flex-start;
            }

            .terms_and_conditions input[type="text"] {
                width: 100%;
                margin-top: 5px;
            }
        }
    </style>
@endsection
@section('content')
    <div class="card sina-card">
        <div class="card-header card-header-s">
            <div class="d-flex justify-content-center">
                <h4>{{ __('obs.purchase') }} {{ __('obs.contract') }} </h4>
            </div>
        </div>

        <div class="card-body">
            <input type="hidden" name="" id="csrf-token" value="{{ Session::token() }}" />
            <form id="form" method="post" action="{{ route('purchase-contract.store') }}"
                enctype="multipart/form-data">
                @csrf
                <div>
                    <p style="font-weight: 500;">
                        This Contract is entered into by and between Manzil Al-Safa Company and &nbsp; <input type="text"
                            style="width:40%;display: inline;" id="contract_with"
                            @isset($edit) value="{{ $edit->contract_with }}" @endisset
                            name="contract_with" class="form-control">&nbsp; The Terms
                        of this Agreement shall begin on START
                        DATE and shall continue through it's termination date of END DATE.
                    </p>
                </div>
                {{--  --}}
                <div id="contract_details" class="row">
                    <label class="mb-4 fs-5 fw-bold">{{ __('obs.contract') }} {{ __('obs.details') }}</label>
                    <div class="contract_group">
                        <label for="contract_no">{{ __('obs.contract') }} {{ __('obs.no') }}</label>
                        <input type="text" class="form-control m-0"
                            @isset($edit) value="{{ $edit->contract_no }}" @endisset
                            name="contract_no" id="contract_no" />
                        @isset($edit)
                            <input type="hidden" name="id" value="{{ $edit->id }}" />
                        @endisset
                    </div>
                    <div class="contract_group">
                        <label for="contract_date">{{ __('obs.contract') }} {{ __('obs.date') }}</label>
                        <input type="text" class="form-control m-0 date_picker" name="contract_date" id="contract_date"
                            @isset($edit) value="{{ date('d-m-Y', strtotime($edit->contract_date)) }}" @else value="{{ date('d-m-Y') }}" @endisset />
                    </div>
                    <div class="contract_group">
                        <label for="contract_name">{{ __('obs.contract') }} {{ __('obs.name') }}</label>
                        <input type="text" @isset($edit) value="{{ $edit->name }}" @endisset
                            class="form-control m-0" name="name" id="contract_name" />
                    </div>
                    <div class="contract_group">
                        <label for="contract_for">{{ __('obs.contract') }} {{ __('obs.for') }}</label>
                        <input type="text" class="form-control m-0"
                            @isset($edit) value="{{ $edit->for }}" @endisset name="for"
                            id="contract_for" />
                    </div>

                    <div class="contract_group">
                        <label for="group_id">{{ __('obs.contract') }} {{ __('obs.group') }}</label>
                        @php($grp = $type_group->where('type', 2))
                        <select class="select_2 form-control" name="group_id" id="group_id">
                            <option value="">Choose One</option>
                            @foreach ($grp as $g)
                                <option value="{{ $g->id }}"
                                    @isset($edit) {{ $edit->group_id == $g->id ? 'selected' : '' }} @endisset>
                                    {{ $g->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="contract_group">
                        <label for="type_id">{{ __('obs.contract') }} {{ __('obs.type') }}</label>
                        @php($type = $type_group->where('type', 1))
                        <select class="select_2 form-control" name="type_id" id="type_id">
                            <option value="">Choose One</option>
                            @foreach ($type as $t)
                                <option value="{{ $t->id }}"
                                    @isset($edit) {{ $edit->type_id == $t->id ? 'selected' : '' }} @endisset>
                                    {{ $t->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="contract_group">
                        <label for="cost_id">{{ __('obs.cost') }} {{ __('obs.center') }}</label>
                        <select class="select_2 form-control" name="costcenter_id" id="costcenter_id">
                            <option value="">Choose One</option>
                            @foreach ($costcenters as $cost)
                                <option value='{{ $cost->id }}'
                                    @isset($edit) {{ $edit->costcenter_id == $cost->id ? 'selected' : '' }} @endisset>
                                    {{ $cost->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="contract_group">
                        <label for="ref_no">{{ __('obs.ref') }} {{ __('obs.no') }}</label>
                        <input type="text" @isset($edit) value="{{ $edit->ref_no }}" @endisset
                            class="form-control m-0" name="ref_no" id="ref_no" />
                    </div>

                    <div class="contract_group">
                        <label for="note">{{ __('obs.desc') }}</label>
                        <textarea name="description" class="form-control m-0">{{ $edit->description ?? '' }}</textarea>
                    </div>

                    <div class="contract_group">
                        <label for="start_date">{{ __('obs.start') }} {{ __('obs.date') }}</label>
                        <input type="text" class="form-control date_picker_post m-0" name="start_date" id="start_date"
                            @isset($edit) value="{{ date('d-m-Y', strtotime($edit->start_date)) }}" @else value="{{ date('d-m-Y') }}" @endisset />
                    </div>

                    <div class="contract_group">
                        <label for="attachment">{{ __('obs.attach') }}
                            @if (isset($edit))
                                <span style="color: red">
                                    (Has @if (!empty($edit->file))
                                        {{ count(json_decode($edit->file)) }}
                                    @else
                                        0
                                    @endif files)
                                </span>
                            @endif
                        </label>
                        <div class="d-flex">
                            <input type="file" id="file-upload" class="form-control" style="overflow: hidden"
                                name="file[]" multiple /> &nbsp;
                            <button type="button" class="btn btn-danger btn-sm" onclick="resetFileInput()">
                                <i class="fas fa-undo-alt"></i>
                            </button>
                        </div>
                    </div>

                    <div class="contract_group">
                        <label for="end_date">{{ __('obs.contract') }} {{ __('obs.amount') }}</label>
                        <input type="number"
                            @isset($edit) value="{{ $edit->invoice_amount }}" @endisset
                            step="any" class="form-control m-0" name="invoice_amount" id="invoice_amount" />
                    </div>

                    <div class="contract_group">
                        <label for="end_date">{{ __('obs.ledger') }}</label>
                        <select name="ledger_id" class="form-control select_2">
                            <option value="">Choose One</option>
                            @foreach ($accounts_ledger as $journal)
                                <option value="{{ $journal->id }}"
                                    @isset($edit) {{ $edit->ledger_id == $journal->id ? 'selected' : '' }} @endisset>
                                    {{ $journal->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="contract_group">
                        <label for="end_date"> {{ __('obs.vendor') }}</label> <br>
                        @if (isset($has_voucher) && $has_voucher && isset($edit))
                            <div class="w-100">
                                <span class="badge badge-primary">{{ $edit->vendor->name_eng ?? '' }}</span>
                                <input type="hidden" name="party_id" id="party_id" value="{{ $edit->party_id }}" />

                            </div>
                        @else
                            <select name="party_id" id="party_id" class="form-control select_2">
                                <option value="">Choose One</option>
                                @foreach ($parties as $party)
                                    <option value="{{ $party->id }}"
                                        @isset($edit) {{ $edit->party_id == $party->id ? 'selected' : '' }} @endisset>
                                        {{ $party->name_eng }}
                                    </option>
                                @endforeach
                            </select>
                        @endif
                    </div>

                    <div class="contract_group">
                        <label>{{ __('obs.ledger') }}</label>
                        @if (isset($has_voucher) && $has_voucher && isset($edit))
                            <div class="w-100">
                                <span class="badge badge-primary">{{ $edit->ledger->name ?? '' }}</span>
                                <input type="hidden" name="ledger_id" id="ledger_id" value="{{ $edit->ledger_id }}" />
                            </div>
                        @else
                            <select name="ledger_id" id="ledger_id" class="form-control select_2">
                                <option value="">Choose One</option>
                                @foreach ($accounts_ledger as $journal)
                                    <option value="{{ $journal->id }}"
                                        @isset($edit) {{ $edit->ledger_id == $journal->id ? 'selected' : '' }} @endisset>
                                        {{ $journal->name }}
                                    </option>
                                @endforeach
                            </select>
                        @endif
                    </div>
                </div>
                <div class="col-12">
                    <div class="card w-100" style="overflow: hidden; border-radius: 8px !important;">
                        <div class="card-header">
                            <span class="fs-5 fw-bold" style="float: left;">Payment Schedule</span>
                            <button type="button" class="btn btn-success btn-sm"
                                style="float: right; padding: 5px 10px;" onclick="installmentIncrement()"><i
                                    class="bi bi-plus-lg"></i> Add more schedule</button> &nbsp;
                        </div>
                        <div class="card-body" style="overflow: auto;">
                            <table class="table table-bordered mt-1">
                                <thead>
                                    <tr>
                                        <td>{{ __('obs.date') }}</td>
                                        <td>{{ __('obs.job_shouldbe_done') }}</td>
                                        <td>{{ __('obs.amount') }}</td>
                                        <td>
                                            {{ __('obs.job_shouldbe_done') }}
                                        </td>
                                        <td>Action</td>
                                    </tr>
                                </thead>
                                <tbody id="installments">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-end">
                    <button class="btn-sina-submit btn-sm" type="submit" id="save">Submit</button>
                </div>
        </div>
    </div>
    </div>

@endsection
@section('script')
    <script>
        $(document).ready(function() {
            const installmentList = @json(@$edit->installment);
            installmentIncrement(installmentList);
        });

        function convertYmdToDmy(dateString) {
            const date = new Date(dateString);

            if (isNaN(date.getTime())) {
                return 'Invalid Date';
            }

            const day = String(date.getDate()).padStart(2, '0');
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const year = date.getFullYear();

            return `${day}-${month}-${year}`;
        }
    </script>

    <script>
        let installmentCount = 0;
        let is_special_edit = @json(@$is_special_edit);

        function installmentIncrement(installmentList = []) {
            let html = "";
            let removeButton = "";
            if (installmentList && installmentList.length > 0) {
                installmentCount = installmentList.length;
            }

            if (installmentList && installmentList.length > 0) {
                installmentCount = installmentList.length;
                installmentList.forEach((installment, index) => {
                    let voucherBtn = "";
                    let removeBtn = "";
                    let voucherOption = "";
                    let voucherLink = "";

                    if (!installment.voucher_id) {
                        // if (is_special_edit) {
                        voucherBtn =
                            `<button type="button" class="btn btn-info btn-sm" id="voucher-btn${index}" onclick="insertVoucher(${index})">Voucher</button>`;
                        // }
                        removeBtn =
                            `<button type="button" class="btn btn-danger btn-sm" id="remove-btn${index}" onclick="installmentDecrement(${index})">${index != 0 ? '-' : '<i class="fas fa-undo-alt"></i>'}</button> &nbsp;`
                    } else {
                        // if (is_special_edit) {
                        voucherBtn =
                            `<button type="button" class="btn btn-warning btn-sm" id="voucher-btn${index}" onclick="updateVoucher(${index})">Update Voucher</button>`;
                        // }
                    }

                    if (installment.voucher_id) {
                        voucherOption =
                            `<input type="hidden" id="voucher_id${index}" value="${installment.voucher_id}" name="voucher_id[]" />`;
                    }
                    if (installment.get_voucher?.voucher_no ?? '' != '') {
                        voucherLink =
                            `<a target="_blank" href="/accounts/voucher/journal_vouchers?payment_voucher_no=+${installment.get_voucher?.voucher_no??''}+" class="btn btn-primary btn-sm">${installment.get_voucher?.voucher_no??''}</a>`;
                    }

                    html += `
                        <tr id="installment${index}">
                            <td>
                                <input type="text" style="max-width:12rem" id="date${index}" required value="${convertYmdToDmy(installment.date)}" class="form-control date-picker" name="date[]" />
                                <input type="hidden" id="installment_id${index}" value="${installment.id}" name="installment_id[]" />
                                ${voucherOption}
                            </td>
                            <td>
                                <input type="text" style="max-width:12rem" id="job_shouldbe_done${index}" value="${installment.job_shouldbe_done??''}" class="form-control" name="job_shouldbe_done[]" />
                            </td>
                            <td>
                                <input type="number" style="max-width:12rem" id="amount${index}" onkeyup="updateInvoiceAmount()" required value="${installment.amount}" step="any" class="form-control amount_cls" name="amount[]" />
                            </td>
                            <td>
                                <input type="text" style="max-width:12rem" id="job_completed${index}" value="${installment.job_completed??''}" class="form-control" name="job_completed[]" />
                            </td>
                            <td>
                                <div class="d-flex justify-content-start">
                                    ${voucherLink}
                                     &nbsp;
                                    ${removeBtn}
                                    ${voucherBtn}
                                </div>
                            </td>
                        </tr>;`
                    $('#installments').html(html);
                });
            } else {
                html += `
                    <tr id="installment${installmentCount}">
                        <td><input type="text" style="max-width:12rem" id="date${installmentCount}" required class="form-control date-picker" name="date[]" /></td>
                        <td><input type="text" style="max-width:12rem" id="job_shouldbe_done${installmentCount}" class="form-control" name="job_shouldbe_done[]" /></td>
                        <td><input type="number" style="max-width:12rem" id="amount${installmentCount}" required value="0" onkeyup="updateInvoiceAmount()" step="any" class="form-control amount_cls" name="amount[]" /></td>
                        <td><input type="text" style="max-width:12rem" id="job_completed${installmentCount}" class="form-control" name="job_completed[]" /></td>
                        <td>
                            <div class="d-flex justify-content-start">
                                <button type="button" class="btn btn-danger btn-sm" onclick="installmentDecrement(${installmentCount})">${installmentCount != 0 ? '-' : '<i class="fas fa-undo-alt"></i>'}</button>
                            </div>
                        </td>
                    </tr>
                `;
                $('#installments').append(html);
                installmentCount++;
            }


            flatpickr('.date-picker', {
                enableTime: false,
                dateFormat: 'd-m-Y'
            });
        }

        function installmentDecrement(rowId) {
            if (rowId == 0) {
                $('#date' + rowId).val('');
                $('#amount' + rowId).val(0);
                return;
            }

            $(`#installment${rowId}`).remove();
        }

        function loader(buttonId, title, status = true) {
            $("#" + buttonId).prop("disabled", status).text(title);
        }

        $('#form').on('submit', (function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            let installmentAmount = 0;

            $('input[name="amount[]"]').each(function() {
                installmentAmount += parseFloat($(this).val()) || 0;
            });
            if (Number(installmentAmount) != Number($('#invoice_amount').val())) {
                callSweetAlert('error', 'Invoice Amount and Installment Amount does not match');
                return;
            }

            $.ajax({
                type: 'POST',
                url: $(this).attr('action'),
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function() {
                    loader('save', 'Processing...');
                },
                success: function(data) {
                    callSweetAlert('success', data.message, '');
                    setTimeout(function() {
                        window.location.href = "{{ route('purchase-contract.index') }}";
                    }, 1000);
                },
                error: function(error) {
                    loader('save', 'Submit', false);

                    if (error.status == 422) {
                        let object = error.responseJSON.errors,
                            result = Object.keys(object).reduce(function(r, k) {
                                return r.concat(object[k] + '<br>');
                            }, []);
                        result = result.join("");
                        callSweetAlert('error', 'Opps!', result);
                    } else if (error.status == 421 || error.status == 500) {
                        if (typeof error.responseJSON.message != 'undefined' && error.responseJSON
                            .message) {
                            callSweetAlert('error', 'Opps!', error.responseJSON.message);
                            return;
                        }
                        callSweetAlert('error',
                            '<p class="text-danger">Internal Server Error..!!!!</p>');
                    } else {
                        callSweetAlert('error',
                            '<p class="text-danger">Something Went Wrong..!!!!</p>');
                    }
                }
            });
        }));

        function resetFileInput() {
            $('#file-upload').val('');
        }

        function getCurrentDateYMD() {
            const currentDate = new Date();
            const year = currentDate.getFullYear();
            const month = String(currentDate.getMonth() + 1).padStart(2, '0');
            const day = String(currentDate.getDate()).padStart(2, '0');

            return `${year}-${month}-${day}`;
        }

        async function insertVoucher(rowId) {
            if (!confirm('Are you sure to insert voucher?')) return;
            if ($('#party_id').val() == '' || $('#ledger_id').val() == '') {
                callSweetAlert('error', 'Please select ledger and party');
                return;
            }
            loader('voucher-btn' + rowId, '...');
            ajaxCallV2("{{ route('voucher.voucher_posting_store') }}", 'POST', {
                    date: getCurrentDateYMD(),
                    type: 5,
                    ref_no: $('#ref_no').val(),
                    transaction_amount: $('#amount' + rowId).val(),
                    journals: [{
                            ledger_id: $('#ledger_id').val(),
                            amount: $('#amount' + rowId).val(),
                            cost_center_id: $('#costcenter_id').val(),
                            note: null,
                            cheque_number: null,
                            cheque_date: null,
                            type: 0
                        },
                        {
                            ledger_id: $('#party_id').val(),
                            amount: $('#amount' + rowId).val(),
                            cost_center_id: $('#costcenter_id').val(),
                            note: null,
                            cheque_number: null,
                            cheque_date: null,
                            type: 1
                        }
                    ]

                }, function(data) {
                    $('#loader').hide();
                    loader('voucher-btn' + rowId, 'Voucher', false);
                    $('#voucher-btn' + rowId).remove();
                    $('#remove-btn' + rowId).remove();
                    ajaxCallV2("{{ route('purchase-contract.voucher_posting') }}", 'POST', {
                        voucher_id: data.id,
                        installment_id: $('#installment_id' + rowId).val()
                    }, function(success) {
                        $('#loader').hide();
                        callSweetAlert('success', 'Voucher Inserted', '');

                    }, function(err) {
                        $('#loader').hide();
                        if (typeof err.responseJSON.message != 'undefined' && err.responseJSON
                            .message) {
                            callSweetAlert('error', 'Opps!', err.responseJSON.message);
                            return;
                        }
                    });

                },
                function(error) {
                    $('#loader').hide();
                    if (error.status == 422) {
                        let object = error.responseJSON.errors,
                            result = Object.keys(object).reduce(function(r, k) {
                                return r.concat(object[k] + '<br>');
                            }, []);
                        result = result.join("");
                        callSweetAlert('error', 'Opps!', result);
                    } else if (error.status == 421 || error.status == 500) {
                        if (typeof error.responseJSON.message != 'undefined' && error.responseJSON
                            .message) {
                            callSweetAlert('error', 'Opps!', error.responseJSON.message);
                            return;
                        }
                        callSweetAlert('error',
                            '<p class="text-danger">Internal Server Error..!!!!</p>');
                    } else {
                        callSweetAlert('error',
                            '<p class="text-danger">Something Went Wrong..!!!!</p>');
                    }
                });
        }

        function updateVoucher(rowId) {
            if (!confirm('Are you sure to insert voucher?')) return;
            if ($('#party_id').val() == '' || $('#ledger_id').val() == '') {
                callSweetAlert('error', 'Please select ledger and party');
                return;
            }
            loader('voucher-btn' + rowId, '...');

            ajaxCallV2("{{ route('purchase-contract.voucher_posting_update') }}", 'POST', {
                voucher_id: $('#voucher_id' + rowId).val(),
                transaction_amount: $('#amount' + rowId).val(),
                cost_center_id: $('#costcenter_id').val(),
                journals: [{
                        ledger_id: $('#ledger_id').val(),
                        amount: $('#amount' + rowId).val(),
                        cost_center_id: $('#costcenter_id').val(),
                        note: null,
                        cheque_number: null,
                        cheque_date: null,
                        type: 0
                    },
                    {
                        ledger_id: $('#party_id').val(),
                        amount: $('#amount' + rowId).val(),
                        cost_center_id: $('#costcenter_id').val(),
                        note: null,
                        cheque_number: null,
                        cheque_date: null,
                        type: 1
                    }
                ]
            }, function(data) {
                $('#loader').hide();
                loader('voucher-btn' + rowId, 'Voucher Update', false);
                callSweetAlert('success', data.message, '');
            }, function(error) {
                $('#loader').hide();
                loader('voucher-btn' + rowId, 'Voucher Update', false);
                if (error.status == 422) {
                    let object = error.responseJSON.errors,
                        result = Object.keys(object).reduce(function(r, k) {
                            return r.concat(object[k] + '<br>');
                        }, []);
                    result = result.join("");
                    callSweetAlert('error', 'Opps!', result);
                } else if (error.status == 421 || error.status == 500) {
                    if (typeof error.responseJSON.message != 'undefined' && error.responseJSON.message) {
                        callSweetAlert('error', 'Opps!', error.responseJSON.message);
                        return;
                    }
                    callSweetAlert('error', '<p class="text-danger">Internal Server Error..!!!!</p>');
                } else {
                    callSweetAlert('error', '<p class="text-danger">Something Went Wrong..!!!!</p>');
                }
            });
        }

        function updateInvoiceAmount() {
            let amount = 0;
            $('input[name="amount[]"]').each(function() {
                amount += parseFloat($(this).val()) || 0;
            });

            const invoiceAmount = parseFloat($('#invoice_amount').val()) || 0;
            if (amount !== invoiceAmount) {
                $('#invoice_amount').val(Number(amount));
            }
        }
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const contractDetails = document.getElementById("contract_details");
            const contractGroups = contractDetails.querySelectorAll(".contract_group");
            const groupCount = contractGroups.length;

            contractGroups.forEach((group) => group.classList.remove("col-lg-4", "col-md-6", "col-12"));

            if (window.innerWidth >= 992) {
                contractGroups.forEach((group) => group.classList.add("col-lg-4"));
            } else if (window.innerWidth >= 768) {
                contractGroups.forEach((group) => group.classList.add("col-md-6"));
            } else {
                contractGroups.forEach((group) => group.classList.add("col-12"));
            }

            window.addEventListener("resize", () => {
                if (window.innerWidth >= 992) {
                    contractGroups.forEach((group) => group.classList.add("col-lg-4"));
                } else if (window.innerWidth >= 768) {
                    contractGroups.forEach((group) => group.classList.add("col-md-6"));
                } else {
                    contractGroups.forEach((group) => group.classList.add("col-12"));
                }
            });
        });
    </script>
@endsection