@extends('layouts.master')

@section('title', 'Edit Surat Jalan Information')

@section('css')
    <style>
        .btn-square {
            width: 100px;
        }
        .table th, .table td {
            text-align: left;
            vertical-align: middle;
            padding: 12px;
        }
        .table thead {
            background-color: #f2f2f2;
        }
        .table-responsive {
            margin-top: 20px;
        }
        .table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }
        .table td, .table th {
            word-wrap: break-word;
            overflow: hidden;
            max-width: 150px;
        }
        .table td {
            padding: 10px;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }
        .table th {
            background-color: #f8f8f8;
            font-weight: bold;
            border-bottom: 2px solid #ddd;
        }
        .table td, .table th {
            border-left: none;
            border-right: none;
        }
        .table-responsive {
            margin-bottom: 30px;
        }
        .section-title {
            font-weight: bold;
            font-size: 18px;
            margin-top: 20px;
            margin-bottom: 10px;
        }
    </style>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker3.min.css" rel="stylesheet">
@endsection

@section('content')
    <x-page-title title="Edit Surat Jalan" pagetitle="Edit Surat Jalan Information" />
    <hr>
    <form id="updateForm" method="POST" action="{{ route('transaction.surat_jalan.update', $suratJalan->id) }}">
        @csrf
        @method('PUT')
        <div class="card">
            <div class="card-body">
                <h6 class="mb-4 text-uppercase">Surat Jalan Information</h6>
                <div class="row mb-4">
                    <div class="form-group">
                        <label for="sales_invoice_number">{{__('Sales Invoice Number')}}</label>
                        {{-- This field is now read-only --}}
                        <input type="text" name="sales_invoice_number" class="form-control" value="{{ $suratJalan->sales_invoice_number }}" readonly>
                    </div>
                    <br>
                    <div class="form-group mt-2">
                        <label for="document_date">{{__('Document Date')}}</label>
                        {{-- This field is editable --}}
                        <input type="date" name="document_date" class="form-control" required value="{{ \Carbon\Carbon::parse($suratJalan->document_date)->format('Y-m-d') }}" id="document_date">
                    </div>
                    <div class="form-group mt-2">
                        <label for="document_date">{{__('Ekspedisi')}}</label>
                        {{-- This field is editable --}}
                        <input type="text" name="ekspedisi" class="form-control" value="{{$suratJalan->ekspedisi??''}}" id="ekspedisi">
                    </div>
                    <div class="form-group mt-2">
                        <label for="document_date">{{__('Alamat')}}</label>
                        {{-- This field is editable --}}
                        <input type="text" name="alamat" class="form-control" value="{{$suratJalan->alamat??''}}" id="alamat">
                    </div>
                    <div class="form-group mt-2">
                        <label for="document_date">Unit</label>
                        <select name="unit_name" id="unit_name" class="form-control">
                            <option value="KOLI" @if($suratJalan->unit_name=='KOLI') selected @endif>KOLI</option>
                            <option value="IKAT" @if($suratJalan->unit_name=='IKAT') selected @endif>IKAT</option>
                        </select>
                    </div>

                </div>
                <br>
                <div class="form-group mt-2">
                    <label>No Telp</label><br>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="phone_number" id="phone_number_yes" value="1" @if($suratJalan->phone_number) checked @endif>
                        <label class="form-check-label" for="phone_number_yes">Yes</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="phone_number" id="phone_number_no" value="0" @if(!$suratJalan->phone_number) checked @endif>
                        <label class="form-check-label" for="phone_number_no">No</label>
                    </div>
                </div>
                <br>
                <div class="form-group mt-2">
                    <label>Alias</label><br>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="alias" id="alias_yes" value="1" @if($suratJalan->alias) checked @endif>
                        <label class="form-check-label" for="alias_yes">Yes</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="alias" id="alias_no" value="0" @if(!$suratJalan->alias) checked @endif>
                        <label class="form-check-label" for="alias_no">No</label>
                    </div>
                </div>

                <div id="alias_fields" style="display: none;">
                    <div class="form-group mt-2">
                        <label for="alias_name">Nama Alias</label>
                        <input type="text" name="alias_name" class="form-control" id="alias_name" value="{{$suratJalan->alias_name}}" disabled>
                    </div>
                    <div class="form-group mt-2">
                        <label for="alias_city">Kota Alias</label>
                        <input type="text" name="alias_city" class="form-control" id="alias_city" value="{{$suratJalan->alias_city}}" disabled>
                    </div>
                </div>

                <div class="section-title">Details</div>
                <div class="table-responsive">
                    <table id="detailTable" class="table table-hover mt-3">
                        <thead>
                            <tr>
                                <th>{{__('Item Name')}}</th>
                                <th>{{__('Qty')}}</th>
                                <th>Notes</th>
                                <th style="max-width:50px;">Action</th>
                            </tr>
                        </thead>
                        <tbody id="detail-table-body">
                            {{-- Data will be inserted here dynamically from the controller --}}
                            @foreach ($suratJalan->details as $index => $detail)
                                <tr>
                                    <td>
                                        <input type="text" class="form-control" name="details[{{ $index }}][item_name]" value="{{ $detail->item_name }}" >
                                    </td>
                                    <td>
                                        <input type="number" class="form-control" name="details[{{ $index }}][qty]" value="{{ $detail->qty }}" required >
                                    </td>
                                    <td>
                                        {{-- Notes is always editable --}}
                                        <textarea placeholder="Description" class="form-control" rows="2" cols="50" name="details[{{ $index }}][notes]">{{ $detail->notes }}</textarea>
                                    </td>
                                    <td style="max-width:50px;">
                                        {{-- The remove button is only for new rows, not existing ones --}}
                                        <button type="button" class="btn btn-danger remove-row" style="display: none;"><i class="material-icons-outlined">delete</i></button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="row mb-4">
                    <div class="col-md-3">
                        <button type="submit" class="btn btn-primary btn-square" id="btn-submit">Update</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <form id="delete-form" action="{{ route('transaction.surat_jalan.destroy', $suratJalan->id) }}" method="POST" style="display:inline;" >
        @csrf
        @method('POST')
        <input type="hidden" name="reason" id="deletion-reason">
        <button type="button" class="btn btn-sm btn-danger mb-3" onclick="confirmDelete(event,'{{ $suratJalan->id }}')"
            @if(!in_array('delete', $privileges)) disabled @endif
        ><i class="material-icons-outlined">delete</i></button>
    </form>
@endsection

@section('scripts')
<script src="{{ URL::asset('build/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ URL::asset('build/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.bootstrap5.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"></script>

<script>
    function confirmDelete(event, id) {
            event.preventDefault();
            Swal.fire({
                title: 'Are you sure?',
                text: 'Do you want to delete this sales invoice?',
                icon: 'warning',
                input: 'text', // This adds an input field
                inputPlaceholder: 'Enter reason for deletion',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                confirmButtonColor: '#0c6efd',
                cancelButtonColor: '#d33',
                cancelButtonText: 'Cancel',
                inputValidator: (value) => {
                if (!value) {
                    return 'You need to provide a reason for cancellation!';
                }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    const reason = result.value; // Get the input value
                    document.getElementById('deletion-reason').value = reason;
                    document.getElementById('delete-form').submit();
                }
            });
        }
    $(document).ready(function() {


        // Since we are on an edit page, the table should always be visible
        $('#detailTable').parent().show();
        let rowCount = {{ count($suratJalan->details) }};

        $.ajaxSetup({
            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            }
        });

        // Delete Row function for new rows
        $(document).on('click', '.remove-row', function() {
            $(this).closest('tr').remove();
            reIndexRows();
        });

        function reIndexRows() {
            $('#detail-table-body tr').each(function(index, element) {
                $(element).find('input, textarea').each(function() {
                    const oldName = $(this).attr('name');
                    if (oldName) {
                        const newName = oldName.replace(/details\[\d+\]/, `details[${index}]`);
                        $(this).attr('name', newName);
                    }
                });
            });
            rowCount = $('#detail-table-body tr').length;
        }

        $("#updateForm").on("submit", function(e) {
            let isValid = true;
            const rows = document.querySelectorAll('#detail-table-body tr');

            if (!rows.length) {
                isValid = false;
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Tidak ada detail barang!',
                });
            }

            if (!isValid) {
                e.preventDefault();
            }
        });

        $('input[name="alias"]').on('change', function() {
            if ($('#alias_yes').is(':checked')) {
                // If 'Yes' is checked, show the fields and enable them
                $('#alias_fields').slideDown();
                $('#alias_name').prop('disabled', false).prop('required', true); // Make required if enabled
                $('#alias_city').prop('disabled', false).prop('required', true); // Make required if enabled
            } else {
                // If 'No' is checked, hide the fields and disable them
                $('#alias_fields').slideUp();
                $('#alias_name').prop('disabled', true).prop('required', false).val(''); // Clear and disable
                $('#alias_city').prop('disabled', true).prop('required', false).val(''); // Clear and disable
            }
        });

        // Initial check on page load to ensure correct state (since 'No' is checked by default)
        // This is optional but good practice to ensure consistency
        if ($('#alias_yes').is(':checked')) {
            $('#alias_fields').show();
            $('#alias_name').prop('disabled', false).prop('required', true);
            $('#alias_city').prop('disabled', false).prop('required', true);
        } else {
            $('#alias_fields').hide();
            $('#alias_name').prop('disabled', true).prop('required', false);
            $('#alias_city').prop('disabled', true).prop('required', false);
        }
    });
</script>
@endsection