@php
    use App\Models\Account;
    use App\Models\SerialNumber;
@endphp
@extends('layouts.admin')
@section('title', 'New sale | Mintavia Admin')

@section('content')


    <div class="row">
        <div class="col-12">
            <div class="card card-primary">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Product Enquiry Follow Up</h3>
                    <div class="ml-auto">
                        <a href="{{ route('admin.tracking.index-short') }}">
                            <button class="btn btn-sm btn-flat shadow rounded-0 btn-danger"><i
                                    class="fa fa-arrow-circle-left"></i> Back
                            </button>
                        </a>
                    </div>
                </div>
                <!-- /.card-header -->
                <form method="post" action="">
                    @csrf
                    <div class="card-body">
                        <div class="container-fluid">
                            <div class="row">
                                <!-- Left Side: Follow Up Form + Timeline -->
                                <div class="col-md-7">
                                    <div class="card h-100 d-flex flex-column">
                                        <div class="card-header bg-primary text-white">
                                            Follow Up
                                        </div>
                                        <div class="card-body flex-grow-1">
                                            <form>
                                                <div class="row">
                                                    <div class="col-md-6 mb-2">
                                                        <label class="form-label">Follow Up Date</label>
                                                        <input type="date" id="follow_up_date" name="follow_up_date"
                                                            class="form-control">
                                                    </div>
                                                    <div class="col-md-6 mb-2">
                                                        <label class="form-label">Next Follow Up Date</label>
                                                        <input type="date" id="next_follow_up_date" class="form-control">
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-md-6 mb-2">
                                                        <label class="form-label">Response</label>
                                                        <input type="text" id="response" name="response"
                                                            class="form-control">
                                                    </div>
                                                    <div class="col-md-6 mb-2">
                                                        <label class="form-label">Note</label>
                                                        <input type="text" id="note" name="note"
                                                            class="form-control">
                                                    </div>
                                                </div>

                                                <!-- ✅ Button Row with Flexbox for right alignment -->
                                                <div class="d-flex justify-content-end mt-3">
                                                    <button type="button" class="btn btn-success"
                                                        onclick="submitFollowUpForm()">Save</button>
                                                </div>
                                            </form>

                                            <div id="follow_up_response_section">
                                                {{-- <div
                                                    style="display: flex; flex-wrap: wrap;  justify-content: center; padding: 10px;background: #f0f2f5;">
                                                    <div
                                                        style="background: rgb(244, 223, 223); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 22px; width: 800px; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease;">

                                                        <!-- Icon -->
                                                        <div
                                                            style="position: absolute; top: 20px; right: 20px; font-size: 22px; color: #4a90e2;">
                                                            📦</div>

                                                        <!-- Date -->
                                                        <div
                                                            style="font-size: 20px; font-weight: bold; color: #4a90e2; margin-bottom: 12px;">
                                                            26-02-2025
                                                        </div>

                                                        <!-- Party Name -->
                                                        <div
                                                            style="font-size: 18px; font-weight: 600; color: #222; margin-bottom: 8px;">
                                                            Party: ABC Traders
                                                        </div>

                                                        <!-- Product Name -->
                                                        <div style="font-size: 16px; color: #444; margin-bottom: 8px;">
                                                            Product: School Uniforms
                                                        </div>

                                                        <!-- Response -->
                                                        <div
                                                            style="font-size: 16px; color: green; font-weight: 500; margin-bottom: 8px;">
                                                            Response: Positive
                                                        </div>

                                                        <!-- Note -->
                                                        <div style="font-size: 15px; color: #555; margin-bottom: 12px;">
                                                            Note: Follow-up scheduled for next week.
                                                        </div>

                                                        <!-- Delete Icon -->
                                                        <div style="position: absolute; bottom: 20px; right: 20px; cursor: pointer; font-size: 18px; color: #e74c3c;"
                                                            title="Delete">🗑️</div>
                                                    </div>
                                                </div> --}}
                                            </div>


                                        </div>
                                    </div>
                                </div>

                                <!-- Right Side: Summary -->
                                <div class="col-md-5">
                                    <div class="card h-100">
                                        <div class="card-header bg-success text-white">
                                            Summary
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <!-- Purchase Details -->
                                                <div class="col-md-6 border-end">
                                                    <h4 class="text-danger fw-bold mb-3">Purchase Detail</h4>
                                                    <p class="mb-1">
                                                        <strong>Party Name:</strong>
                                                        {{ optional($account->firstWhere('id', $tracking->party_supplier_name))->name ?? 'N/A' }}
                                                    </p>
                                                    <p class="mb-1"><strong>Bill Date:</strong> {{ $tracking->bill_Date }}
                                                    </p>
                                                    <p class="mb-1"><strong>Bill No:</strong>
                                                        {{ $tracking->purchase_bill_no }}</p>
                                                    <p class="mb-1">
                                                        <strong>Serial No:</strong>
                                                        {{ optional($soldSerialNumbers->firstWhere('id', $tracking->purchase_in_sn))->serial_number ?? 'N/A' }}
                                                    </p>
                                                    <p class="mb-1"><strong>Amount:</strong>
                                                        {{ $tracking->purchase_amount }}</p>
                                                    <p class="mb-1"><strong>Remark:</strong> {{ $tracking->remark_n }}</p>
                                                    <p class="mb-1"><strong>Remark Long:</strong>
                                                        {{ $tracking->remark_long }}</p>
                                                </div>

                                                <!-- Sale Details -->
                                                <div class="col-md-6">
                                                    <h4 class="text-danger fw-bold mb-3">Sale Detail</h4>
                                                    <label for="status"><strong>Status:</strong></label>
                                                    <select id="status" name="status" class="form-select mb-1">
                                                        <option value="Active"
                                                            {{ $tracking->status == 'Active' ? 'selected' : '' }}>Active
                                                        </option>
                                                        <option value="Inactive"
                                                            {{ $tracking->status == 'Inactive' ? 'selected' : '' }}>Inactive
                                                        </option>
                                                        <option value="complete"
                                                            {{ $tracking->status == 'complete' ? 'selected' : '' }}>
                                                            Complete</option>
                                                    </select>
                                                    <p class="mb-1"><strong>Enquiry Date:</strong>
                                                        {{ $tracking->enquiry_date }}</p>
                                                    <p class="mb-1"><strong>Last Follow Up:</strong>
                                                        {{ $tracking->last_follow_up_date }}
                                                    </p>
                                                    <p class="mb-1"><strong>Next Follow Up:</strong>
                                                        {{ $tracking->next_follow_up_date }}</p>
                                                    <p class="mb-1">
                                                        <strong>Party Name:</strong>
                                                        {{ $tracking->customer ? $tracking->customer->name : 'No customer found' }}
                                                    </p>
                                                    <p class="mb-1"><strong>Phone: </strong> {{ $tracking->mobile_no }}
                                                    </p>
                                                    <p class="mb-1"><strong>Address:</strong>
                                                        {{ $tracking->address_1 }},
                                                        {{ $tracking->address_2 }},
                                                        {{ $tracking->city_village }}, {{ $tracking->pin_code }},
                                                        {{ $tracking->state }}, {{ $tracking->state_code }}
                                                    </p>
                                                    <p class="mb-1"><strong>PAN No:</strong> {{ $tracking->pan_card_no }}
                                                    </p>
                                                    <p class="mb-1"><strong>Addhar:</strong>
                                                        {{ $tracking->aadhar_card_no }}</p>
                                                    <p class="mb-1"><strong>GSTIN:</strong> {{ $tracking->gstin }}</p>
                                                    <p class="mb-1"><strong>Bike/Car:</strong>
                                                        {{ $tracking->car_bike_name }}</p>
                                                    <p class="mb-1"><strong>Bike/Car No:</strong>
                                                        {{ $tracking->car_bike_number }}</p>
                                                    <p class="mb-1">
                                                        <strong>Part no:</strong>
                                                        {{ in_array($tracking->sale_part_no, $partNumbers->toArray()) ? $tracking->sale_part_no : 'N/A' }}
                                                    </p>
                                                    <p class="mb-1"><strong>Iteam name:</strong>
                                                        {{ $tracking->sale_item_name }}</p>
                                                    <p class="mb-1">
                                                        <strong>Serial/Lot No:</strong>
                                                        {{ optional($soldSerialNumbers->firstWhere('id', $tracking->sold_sirl_number))->serial_number ?? 'N/A' }}
                                                        /
                                                        {{ optional($lotNumbers->firstWhere('id', $tracking->lot_no))->lot_number ?? 'N/A' }}
                                                    </p>
                                                    <p class="mb-1"><strong>Brand:</strong> {{ $tracking->sale_brand }}
                                                    </p>
                                                    <p class="mb-1">
                                                        <strong>Guarantee/Warranty:</strong>
                                                        {{ $tracking->grawant_warant == 'guarantee' ? 'Guarantee' : ($tracking->grawant_warant == 'warranty' ? 'Warranty' : 'N/A') }}{{ $tracking->time }}
                                                    </p>
                                                    <p class="mb-1"><strong>Assigned:</strong> {{ $tracking->assigned }}
                                                    </p>
                                                    <p class="mb-1"><strong>Description:</strong>
                                                        {{ $tracking->descripaten }}</p>
                                                    <p class="mb-1"><strong>Note:</strong> {{ $tracking->note }}</p>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <!-- Remark Section -->
                                <div class="col-md-8">
                                    <div class="form-row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="remark_n"><strong>Remark</strong></label>
                                                <input type="text" class="form-control" id="remark_n" name="remark_n"
                                                    style="border-radius: 5px;">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="remark_long"><strong>Remark Long</strong></label>
                                                <input type="text" class="form-control" id="remark_long"
                                                    name="remark_long" style="border-radius: 5px;">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Buttons Section -->
                                <div class="col-md-4 d-flex justify-content-end align-items-end">
                                    <button class="btn btn-success ml-2" type="button">Print</button>
                                    <button class="btn btn-danger ml-2" type="button">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

            </div>

            <!-- /.card -->
        </div>
    </div>
@endsection


@section('plugins.Select2', true)

@section('js')
    

    <script>
        let follow_up_data = [];

        function submitFollowUpForm() {
            let next_follow_up_date = $("#next_follow_up_date").val()
            let status = $("#status").val()
            console.log("Status:", status); // For debugging
            let response = $("#response").val()
            let note = $("#note").val()

            follow_up_data.push({
                next_follow_up_date: next_follow_up_date,
                status: status,
                response: response,
                note: note
            })

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                url: '{{ route('admin.tracking.tracking-follow-up-update') }}',
                method: 'POST',
                data: {
                    tracking_id: "{{ $tracking->id }}",
                    next_follow_up_date: next_follow_up_date,
                    status: status,
                    follow_up_data: JSON.stringify(follow_up_data)
                },
                success: function(response) {
                    updateFollowUpCards(follow_up_data);

                    // ✅ Clear the form fields
                    $("#next_follow_up_date").val('');
                    $("#response").val('');
                    $("#note").val('');
                },
                error: function(xhr, status, error) {
                    alert("AJAX error: " + error);
                }
            });
        }


        function updateFollowUpCards(follow_up_data) {
            $("#follow_up_response_section").empty()
            follow_up_data.forEach((item, index) => {
                let html = `
                <div id="follow_up_response_${index}" style="display: flex; flex-wrap: wrap;  justify-content: center; padding: 10px;background: #f0f2f5;">
                    <div
                        style="background: rgb(244, 223, 223); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 22px; width: 800px; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease;">

                        <!-- Icon -->
                        <div
                            style="position: absolute; top: 20px; right: 20px; font-size: 22px; color: #4a90e2;">
                            📦</div>

                        <!-- Date -->
                        <div
                            style="font-size: 20px; font-weight: bold; color: #4a90e2; margin-bottom: 12px;">
                            ${item.next_follow_up_date}
                        </div>

                        <!-- Party Name -->
                        <div
                            style="font-size: 18px; font-weight: 600; color: #222; margin-bottom: 8px;">
                            {{ $tracking->customer ? $tracking->customer->name : 'No customer found' }}
                        </div>

                        <!-- Product Name -->
                        <div style="font-size: 16px; color: #444; margin-bottom: 8px;">
                            {{ $tracking->sale_item_name }}
                        </div>

                        <!-- Response -->
                        <div
                            style="font-size: 16px; color: green; font-weight: 500; margin-bottom: 8px;">
                            Response: ${item.response}
                        </div>

                        <!-- Note -->
                        <div style="font-size: 15px; color: #555; margin-bottom: 12px;">
                            Note: ${item.note}
                        </div>

                        <!-- Delete Icon -->
                        <div style="position: absolute; bottom: 20px; right: 20px; cursor: pointer; font-size: 18px; color: #e74c3c;" title="Delete" onclick="DeletFeollowUpResponse(${index})"> 🗑️</div>
                    </div>
                </div>
            
            `;
                $("#follow_up_response_section").prepend(html)
            });

        }

        function saveFollowUpData() {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                url: '{{ route('admin.tracking.tracking-follow-up-update') }}',
                method: 'POST',
                data: {
                    tracking_id: "{{ $tracking->id }}",
                    next_follow_up_date: $("#next_follow_up_date").val(), // still send current field if needed
                    follow_up_data: JSON.stringify(follow_up_data)
                },
                success: function(response) {
                    updateFollowUpCards(follow_up_data);
                },
                error: function(xhr, status, error) {
                    alert("AJAX error: " + error);
                }
            });
        }

        function DeletFeollowUpResponse(index) {
            if (index > -1 && index < follow_up_data.length) {
                // Remove the item at the given index
                follow_up_data.splice(index, 1);

                // Optionally update the follow-up cards on the screen
                saveFollowUpData();
            }
        }
        $(document).ready(function() {
            let tracking_follow_up_data = @json($tracking_follow_up_data);
            follow_up_data = tracking_follow_up_data;
            updateFollowUpCards(tracking_follow_up_data);
        })
    </script>
@endsection