@extends('layouts.baseAdmin')

@section('title', 'Sebut Harga')

@section('content')

<style>
    .no-outline{
        border: none;
        outline: none;
    }
</style>

    <!-- Navbar -->
    <nav class="navbar navbar-main navbar-expand-lg position-sticky mt-4 top-1 px-0 mx-4 shadow-none border-radius-xl z-index-sticky"
        id="navbarBlur" data-scroll="true">
        <div class="container-fluid py-1 px-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
                    <li class="breadcrumb-item text-sm">
                        <a class="opacity-3 text-dark" href="javascript:;">
                            <svg width="12px" height="12px" class="mb-1" viewBox="0 0 45 40" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>shop </title>
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <g transform="translate(-1716.000000, -439.000000)" fill="#252f40" fill-rule="nonzero">
                                        <g transform="translate(1716.000000, 291.000000)">
                                            <g transform="translate(0.000000, 148.000000)">
                                                <path
                                                    d="M46.7199583,10.7414583 L40.8449583,0.949791667 C40.4909749,0.360605034 39.8540131,0 39.1666667,0 L7.83333333,0 C7.1459869,0 6.50902508,0.360605034 6.15504167,0.949791667 L0.280041667,10.7414583 C0.0969176761,11.0460037 -1.23209662e-05,11.3946378 -1.23209662e-05,11.75 C-0.00758042603,16.0663731 3.48367543,19.5725301 7.80004167,19.5833333 L7.81570833,19.5833333 C9.75003686,19.5882688 11.6168794,18.8726691 13.0522917,17.5760417 C16.0171492,20.2556967 20.5292675,20.2556967 23.494125,17.5760417 C26.4604562,20.2616016 30.9794188,20.2616016 33.94575,17.5760417 C36.2421905,19.6477597 39.5441143,20.1708521 42.3684437,18.9103691 C45.1927731,17.649886 47.0084685,14.8428276 47.0000295,11.75 C47.0000295,11.3946378 46.9030823,11.0460037 46.7199583,10.7414583 Z">
                                                </path>
                                                <path
                                                    d="M39.198,22.4912623 C37.3776246,22.4928106 35.5817531,22.0149171 33.951625,21.0951667 L33.92225,21.1107282 C31.1430221,22.6838032 27.9255001,22.9318916 24.9844167,21.7998837 C24.4750389,21.605469 23.9777983,21.3722567 23.4960833,21.1018359 L23.4745417,21.1129513 C20.6961809,22.6871153 17.4786145,22.9344611 14.5386667,21.7998837 C14.029926,21.6054643 13.533337,21.3722507 13.0522917,21.1018359 C11.4250962,22.0190609 9.63246555,22.4947009 7.81570833,22.4912623 C7.16510551,22.4842162 6.51607673,22.4173045 5.875,22.2911849 L5.875,44.7220845 C5.875,45.9498589 6.7517757,46.9451667 7.83333333,46.9451667 L19.5833333,46.9451667 L19.5833333,33.6066734 L27.4166667,33.6066734 L27.4166667,46.9451667 L39.1666667,46.9451667 C40.2482243,46.9451667 41.125,45.9498589 41.125,44.7220845 L41.125,22.2822926 C40.4887822,22.4116582 39.8442868,22.4815492 39.198,22.4912623 Z">
                                                </path>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </svg>
                        </a>
                    </li>
                    <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark"
                            href="{{ route('quotation.index') }}">Sebut Harga</a></li>
                    <li class="breadcrumb-item text-sm text-dark active" aria-current="page">Kemaskini Sebut Harga</li>
                </ol>
                <h6 class="font-weight-bolder mb-0">Kemaskini Sebut Harga</h6>
            </nav>
            <div class="sidenav-toggler sidenav-toggler-inner d-xl-block d-none ">
                <a href="javascript:;" class="nav-link text-body p-0">
                    <div class="sidenav-toggler-inner">
                        <i class="sidenav-toggler-line"></i>
                        <i class="sidenav-toggler-line"></i>
                        <i class="sidenav-toggler-line"></i>
                    </div>
                </a>
            </div>
            <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
                <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                    <div class="input-group">
                        <span class="input-group-text text-body"><i class="fas fa-search" aria-hidden="true"></i></span>
                        <input type="text" class="form-control" placeholder="Type here...">
                    </div>
                </div>
                <ul class="navbar-nav  justify-content-end">
                    <li class="nav-item d-flex align-items-center">
                        <form action="{{ route('logout') }}" method="POST" style="display:inline;">
                            @csrf
                            <button type="submit" class="nav-link text-body font-weight-bold px-0"
                                style="background: none; border: none;">
                                <i class="fa fa-user me-sm-1"></i>
                                <span class="d-sm-inline d-none">Log Keluar</span>
                            </button>
                        </form>
                    </li>
                    <li class="nav-item d-xl-none ps-3 d-flex align-items-center">
                        <a href="javascript:;" class="nav-link text-body p-0" id="iconNavbarSidenav">
                            <div class="sidenav-toggler-inner">
                                <i class="sidenav-toggler-line"></i>
                                <i class="sidenav-toggler-line"></i>
                                <i class="sidenav-toggler-line"></i>
                            </div>
                        </a>
                    </li>
                    <li class="nav-item px-3 d-flex align-items-center">
                        <a href="javascript:;" class="nav-link text-body p-0">
                            <i class="fa fa-cog fixed-plugin-button-nav cursor-pointer"></i>
                        </a>
                    </li>
                    <li class="nav-item dropdown pe-2 d-flex align-items-center">
                        <a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuButton"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-bell cursor-pointer"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end px-2 py-3 me-sm-n4" aria-labelledby="dropdownMenuButton">
                            <li class="mb-2">
                                <a class="dropdown-item border-radius-md" href="javascript:;">
                                    <div class="d-flex py-1">
                                        <div class="my-auto">
                                            <img src="{{asset('assets/img/team-2.jpg')}}" class="avatar avatar-sm  me-3 "
                                                alt="user image">
                                        </div>
                                        <div class="d-flex flex-column justify-content-center">
                                            <h6 class="text-sm font-weight-normal mb-1">
                                                <span class="font-weight-bold">New message</span> from Laur
                                            </h6>
                                            <p class="text-xs text-secondary mb-0">
                                                <i class="fa fa-clock me-1"></i>
                                                13 minutes ago
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="mb-2">
                                <a class="dropdown-item border-radius-md" href="javascript:;">
                                    <div class="d-flex py-1">
                                        <div class="my-auto">
                                            <img src="{{asset('assets/img/small-logos/logo-spotify.svg')}}"
                                                class="avatar avatar-sm bg-gradient-dark  me-3 " alt="logo spotify">
                                        </div>
                                        <div class="d-flex flex-column justify-content-center">
                                            <h6 class="text-sm font-weight-normal mb-1">
                                                <span class="font-weight-bold">New album</span> by Travis Scott
                                            </h6>
                                            <p class="text-xs text-secondary mb-0">
                                                <i class="fa fa-clock me-1"></i>
                                                1 day
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item border-radius-md" href="javascript:;">
                                    <div class="d-flex py-1">
                                        <div class="avatar avatar-sm bg-gradient-secondary  me-3  my-auto">
                                            <svg width="12px" height="12px" viewBox="0 0 43 36" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg"
                                                xmlns:xlink="http://www.w3.org/1999/xlink">
                                                <title>credit-card</title>
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF"
                                                        fill-rule="nonzero">
                                                        <g transform="translate(1716.000000, 291.000000)">
                                                            <g transform="translate(453.000000, 454.000000)">
                                                                <path class="color-background"
                                                                    d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z"
                                                                    opacity="0.593633743"></path>
                                                                <path class="color-background"
                                                                    d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z">
                                                                </path>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </g>
                                            </svg>
                                        </div>
                                        <div class="d-flex flex-column justify-content-center">
                                            <h6 class="text-sm font-weight-normal mb-1">
                                                Payment successfully completed
                                            </h6>
                                            <p class="text-xs text-secondary mb-0">
                                                <i class="fa fa-clock me-1"></i>
                                                2 days
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- End Navbar -->

    <!-- Section -->
    <section style="background: #f6f9ff;">

        <div class="container-fluid py-4 w-100">

            <div class="row">
                <div class="col-12">
                    <div class="card p-4">
                        <div class="card-body">

                            <!-- Quotation Detail-->
                            <div class="row mt-4">
                                <div class="col-8">
                                    <address>
                                        <b>Yusof Abdullah</b> <br>
                                        64, Lebuh Pendamar Indah 1<br>
                                        Taman Pendamar Indah<br>
                                        42000 Pelabuhan Klang, Selangor<br>
                                        <abbr title="Phone">Tel No:</abbr> (+60) 10-5235987
                                    </address>
                                </div>

                                <div class="col-4 mt-4">
                                    <h3 class="sitename">MyTukang<span style="color: #feb900">.</span></h3>
                                </div>
                            </div>

                            <!-- Horizontal line -->
                            <hr>

                            <!-- end row -->

                            <div class="row mt-4">
                                <div class="col-sm-8">
                                    <p><b>Kepada:</b></p>
                                    <p>
                                        {{ $quotation->booking->user->name }}<br>
                                        {{ $quotation->booking->address->address_line1 }}<br>
                                        {{ $quotation->booking->address->address_line2 }}<br>
                                        {{ $quotation->booking->address->postcode }} {{ $quotation->booking->address->city }}
                                    </p>
                                </div> <!-- end col-->
                            
                                <div class="col-sm-4">
                                    <div class="float-sm-right">
                                        <div class="form-group">
                                            <p style="color: grey; font-size:14px;"><b>Tarikh Sebut Harga:</b></p>
                                            <input type="text" class="form-control" id="date" name="date" value="{{ now()->format('d/m/Y') }}" readonly>
                                        </div>
                                    
                                        <p style="color: grey; font-size:14px;"><b>No. Tempahan:</b></p>
                                        <div class="d-flex align-items-center">
                                            <input type="text" class="form-control me-2" id="booking_id" name="booking_id" value="#{{ $quotation->booking->id }}" readonly>
                                            <!-- Icon trigger for modal -->
                                            <i class="fas fa-info-circle text-info" style="cursor: pointer;" data-bs-toggle="modal" data-bs-target="#bookingDetailsModal"></i>
                                        </div>
                                    </div>
                                </div> <!-- end col-->
                            </div>
                            <!-- end row -->

                            <div class="row mt-3">
                                <div class="col d-flex justify-content-end">
                                    <button class="btn btn-secondary" id="add-row" type="button">Tambah Baris</button>
                                </div>
                            </div>
                            
                            <form action="{{ route('quotation.updateData', ['id' => $quotation->booking_id]) }}" method="POST">
                                @csrf
                                @method('POST')
                            
                                <!-- Hidden input for tracking deleted rows -->
                                <input type="hidden" id="deletedRows" name="deleted_rows" value="">
                            
                                <div class="row">
                                    <div class="col-12">
                                        <div class="table-responsive">
                                            <table class="table" id="quotation-table">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Skop Kerja</th>
                                                        <th>Kuantiti</th>
                                                        <th>Harga Seunit</th>
                                                        <th>Jumlah</th>
                                                        <th>Hapus</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($items as $index => $item)
                                                        <tr data-id="{{ $item->id }}">
                                                            <td>{{ $index + 1 }}</td>
                                                            <td>
                                                                <input type="text" name="scope_of_work[{{ $index }}]" class="form-control"
                                                                       value="{{ old('scope_of_work.' . $index, $item->scope_of_work) }}" required>
                                                            </td>
                                                            <td>
                                                                <input type="number" name="quantity[{{ $index }}]" class="form-control"
                                                                       value="{{ old('quantity.' . $index, $item->quantity) }}" oninput="calculateTotal()" required>
                                                            </td>
                                                            <td>
                                                                <input type="number" step="0.01" name="unit_price[{{ $index }}]" class="form-control"
                                                                       value="{{ old('unit_price.' . $index, $item->unit_price) }}" oninput="calculateTotal()" required>
                                                            </td>
                                                            <td>
                                                                <input type="number" step="0.01" name="total_price[{{ $index }}]" class="form-control"
                                                                       value="{{ old('total_price.' . $index, $item->total_price) }}" readonly>
                                                            </td>
                                                            <td>
                                                                <a href="javascript:void(0);" class="delete-row">
                                                                    <i class="fas fa-trash text-dark mt-3" style="font-size: 16px;"></i>
                                                                </a>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div><!-- end table-responsive -->
                                    </div> <!-- end col -->
                                </div>
                                <hr>
                            
                                <!-- Total Amount -->
                                <div class="row">
                                    <div class="col-8 text-end">
                                        <p><b>Jumlah Keseluruhan</b></p>
                                    </div>
                                    <div class="col-4 text-center">
                                        <p><b>RM <span id="totalAmount">{{ number_format($totalAmount, 2) }}</span></b></p>
                                    </div>
                                </div>
                            
                                <div class="row">
                                    <div class="button-row d-flex justify-content-between mt-4 col-12">
                                        <button type="button" onclick="history.back()" class="btn bg-gradient-light">Kembali</button>
                                        <button type="submit" class="btn btn-success">Kemaskini</button>
                                    </div>
                                </div>
                            </form>
                            
                                 
                        </div> <!-- end card-body-->
                    </div> <!-- end card -->
                </div> <!-- end col-->
            </div>
            <!-- end row -->
        </div>

        <!-- Booking Details Modal -->
        <div class="modal fade" id="bookingDetailsModal" tabindex="-1" role="dialog" aria-labelledby="bookingDetailsModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="bookingDetailsModalLabel">Maklumat Tempahan</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p><strong>Nama Pelanggan:</strong> {{ $quotation->booking->user->name }}</p>
                        <p><strong>Servis:</strong> {{ $quotation->booking->service->name }}</p>
                        <p><strong>Sub Servis:</strong> {{ $quotation->booking->subService->name }}</p>
                        <p><strong>Unit:</strong> {{ $quotation->booking->unit }}</p>
                        <p><strong>Tarikh Tempahan:</strong> {{ $quotation->booking->created_at->format('Y-m-d') }}</p>
                        <p><strong>Catatan:</strong> {{ $quotation->booking->remark }}</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </div>
        </div>



    </section>


    <!--   Core JS Files   -->
    <script src="{{asset('assets/js/core/popper.min.js')}}"></script>
    <script src="{{asset('assets/js/core/bootstrap.min.js')}}"></script>
    <script src="{{asset('assets/js/plugins/perfect-scrollbar.min.js')}}"></script>
    <script src="{{asset('assets/js/plugins/smooth-scrollbar.min.js')}}"></script>
    <script src="{{asset('assets/js/plugins/datatables.js')}}"></script>

    <!-- Kanban scripts -->
    <script src="{{asset('assets/js/plugins/dragula/dragula.min.js')}}"></script>
    <script src="{{asset('assets/js/plugins/jkanban/jkanban.js')}}"></script>
    <script src="{{asset('assets/js/plugins/multistep-form.js')}}"></script>
    <script src="{{asset('assets/js/plugins/choices.min.js')}}"></script>
    <script src="{{asset('assets/js/plugins/sweetalert.min.js')}}"></script>


    <script>
        // Add a new row
        document.getElementById('add-row').addEventListener('click', function () {
            const tableBody = document.querySelector('#quotation-table tbody');
            const rowCount = tableBody.rows.length;
    
            const newRow = `
                <tr>
                    <td>${rowCount + 1}</td>
                    <td>
                        <input type="text" name="scope_of_work[${rowCount}]" class="form-control" required>
                    </td>
                    <td>
                        <input type="number" name="quantity[${rowCount}]" class="form-control" oninput="calculateTotal()" required>
                    </td>
                    <td>
                        <input type="number" step="0.01" name="unit_price[${rowCount}]" class="form-control" oninput="calculateTotal()" required>
                    </td>
                    <td>
                        <input type="number" step="0.01" name="total_price[${rowCount}]" class="form-control" readonly>
                    </td>
                    <td>
                        <a href="javascript:void(0);" class="delete-row">
                            <i class="fas fa-trash text-dark mt-2" style="font-size:16px"></i>
                        </a>
                    </td>
                </tr>
            `;
    
            tableBody.insertAdjacentHTML('beforeend', newRow);
            attachDeleteHandlers(); // Reattach delete event to new rows
        });
    
        // Calculate the total price for each row and update the grand total
        function calculateTotal() {
            let grandTotal = 0;
            const rows = document.querySelectorAll('#quotation-table tbody tr');
    
            rows.forEach(row => {
                const quantity = parseFloat(row.querySelector('input[name^="quantity"]').value) || 0;
                const unitPrice = parseFloat(row.querySelector('input[name^="unit_price"]').value) || 0;
                const totalField = row.querySelector('input[name^="total_price"]');
    
                const rowTotal = quantity * unitPrice;
                totalField.value = rowTotal.toFixed(2);
    
                grandTotal += rowTotal;
            });
    
            document.getElementById('totalAmount').innerText = grandTotal.toFixed(2);
        }
    
        // Delete row functionality
        function attachDeleteHandlers() {
            const deleteIcons = document.querySelectorAll('.delete-row');
            deleteIcons.forEach(icon => {
                icon.addEventListener('click', function () {
                    const row = this.closest('tr');
                    const recordId = row.getAttribute('data-id'); // Get the data-id of the row

                    if (recordId) {
                        // Add the record ID to the hidden input for deleted rows
                        const deletedRowsInput = document.getElementById('deletedRows');
                        const deletedRows = deletedRowsInput.value ? JSON.parse(deletedRowsInput.value) : [];
                        deletedRows.push(recordId);
                        deletedRowsInput.value = JSON.stringify(deletedRows); // Update hidden input value
                    }

                    // Remove the row from the table
                    row.remove();
                    recalculateRowNumbers(); // Recalculate row numbers
                    calculateTotal(); // Recalculate total
                });
            });
        }


        // Recalculate row numbers after deleting a row
        function recalculateRowNumbers() {
            const rows = document.querySelectorAll('#quotation-table tbody tr');
            rows.forEach((row, index) => {
                row.querySelector('td:first-child').textContent = index + 1;
                row.querySelectorAll('input').forEach(input => {
                    const name = input.getAttribute('name');
                    const updatedName = name.replace(/\[\d+\]/, `[${index}]`);
                    input.setAttribute('name', updatedName);
                });
            });
        }

        // Attach delete handlers on page load
        attachDeleteHandlers();
    </script>
    

    <script>
        var win = navigator.platform.indexOf('Win') > -1;
        if (win && document.querySelector('#sidenav-scrollbar')) {
            var options = {
                damping: '0.5'
            }
            Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
        }
    </script>

    <!-- Control Center for Soft Dashboard: parallax effects, scripts for the example pages etc -->
    <script src="{{asset('assets/js/soft-ui-dashboard.min.js?v=1.0.3')}}"></script>


@endsection