@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif



@extends('layouts.user.user')

@section('title', 'Quote Details')
@section('page', 'Quote Details')

@section('content')

<div class="jsw py-4 mx-3">
    <!-- Header -->
    <h5 class="mb-1">{{ $quote->title ?? 'Unnamed Project' }}</h5>
    <small class="text-muted d-block mb-4">
        Designer Name - {{ $quote->staff->name ?? '-' }} &nbsp;&nbsp;
    </small> 

    <!-- Info Cards -->
    <div class="row g-3 mb-4">
        <!-- Project Details -->
        <div class="col-md-6">
            <h6 class="mb-3">Project Details</h6>
            <div class="card p-3">
                <p><strong>Quote Id:</strong> #{{ $quote->id }}</p>
                <p><strong>Client Name:</strong> {{ $quote->client_name }}</p>
                <p><strong>Project Name:</strong> {{ $quote->title }}</p>
                <p><strong>Project Location:</strong> {{ $quote->location }}</p>
                <p><strong>Quote Date:</strong> {{ date('d-m-Y', strtotime($quote->start_date)) }}</p>
            </div>
        </div>

        <!-- Material Details -->
        <div class="col-md-6">
            <h6 class="mb-3">Material Details</h6>
            <div class="card p-3">
                <div class="d-flex justify-content-between">
                    <div>
                        <p><strong>Approx. sqft:</strong> {{ number_format($quote->area) }}</p>
                        <p><strong>Material Used:</strong> {{ $quote->materialType->name  ?? '-' }}</p>
                        <p><strong>Skylight panels:</strong> {{ $quote->skylight_panel ?? 0 }}</p>
                        <p><strong>Turbo Vents:</strong> {{ $quote->turbo_vents ?? 0 }}</p>
                        <p><strong>Final Cost:</strong> ₹ {{ number_format($quote->project_cost) }}</p>
                    </div>
                    <div>
                        <p><strong>Color & Finish:</strong> {{ $quote->color ?? '-' }}</p>
                        <p><strong>Sheating Angle:</strong> {{ $quote->sheeting_angle ?? '-' }}</p>
                        <p><strong>Wall light panels:</strong> {{ $quote->wall_light_panel ?? 0 }}</p>
                        <p><strong>Fasteners/Screws:</strong> {{ $quote->screws ?? 0 }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Payment Details and Designer -->
    <div class="row card-new-pro g-3 px-0 mb-4">
        <div class="col-md-6">
            <h6 class="mb-3">Payment Details</h6>
            <div class="card bg-transparent py-3 px-0 border-0">
                @if($quote->costStages)
                    @foreach($quote->costStages as $payment)
                        <div class="col-12 mb-3">
                            <input type="text" class="form-control" value="{{ $payment->stage_name ?? '' }}" readonly>
                        </div>
                        <div class="col-12 mb-3">
                            <input type="text" class="form-control" value="₹ {{ number_format($payment->cost ?? 0) }}" readonly>
                        </div>
                    @endforeach
                @else
                    <p>No payment details found.</p>
                @endif
            </div>
        </div>

        <div class="col-md-6">
            <h6 class="mb-3">Assigned Designer</h6>
            <div class="card bg-transparent py-3 border-0">
                <div class="mb-3">
                    <label class="form-label">Designer</label>
                    <input type="text" class="form-control" value="{{  $quote->staff->name  ?? '-' }}" readonly />
                </div>
                <div class="mb-3">
                    <label class="form-label">Expected Design Submission Date</label>
                    <input type="text" class="form-control" value="{{ date('d-m-Y', strtotime($quote->expected_design_date)) }}" readonly />
                </div>
            </div>
        </div>

        <!-- Description -->
        <div class="col-12">
            <h6 class="mb-3">Description</h6>
            <textarea class="form-control" id="description" rows="2" readonly>{{ $quote->project_desc ?? '-' }}</textarea>
        </div>

       <!-- E-Signature Section -->
        <div class="col-md-6 pt-4">
            <h6>Signed Offer</h6>
            <label class="form-label">E-Signature</label> <br>
            <canvas id="signature-pad" width="400" height="200" style="border:1px solid #000;"></canvas>
            <div class="mt-2">
                <button id="clear" class="btn btn-secondary btn-sm">Clear</button>
                <button id="save" class="btn btn-primary btn-sm">Save Signature</button>
            </div>
        </div>

        <meta name="csrf-token" content="{{ csrf_token() }}">

     <!-- E-Signature -->
        <div class="col-md-6 pt-4">
            <h6>Signed Offer</h6>
            <label class="form-label">E-Signature</label> <br>
            @if($quote->digital_signature)
                <img src="{{ $quote->digital_signature }}" alt="Signature">
            @else
                <p>No signature available</p>
            @endif
        </div> 

        <!-- Accept / Reject Buttons -->
        <!-- <div class="mt-4 d-flex gap-2">
            <form action="{{ route('user.quote_action', $quote->id) }}" method="POST">
                @csrf
                <input type="hidden" name="action" value="accept">
                <button type="submit" class="btn btn-success">Accept</button>
            </form>

            <form action="{{ route('user.quote_action', $quote->id) }}" method="POST">
                @csrf
                <input type="hidden" name="action" value="reject">
                <button type="submit" class="btn btn-danger">Reject</button>
            </form>
        </div> -->

                <div class="mt-4 d-flex gap-2" id="quote-actions">
                    <form id="accept-form" action="{{ route('user.quote_action', $quote->id) }}" method="POST">
                        @csrf
                        <input type="hidden" name="action" value="accept">
                        <button type="submit" class="btn btn-success">Accept</button>
                    </form>

                    <!-- Reject Button (just a button, no form submit yet) -->
                    <button id="reject-btn" class="btn btn-danger">Reject</button>
                </div>

                <!-- Hidden form to submit rejection reason -->
                <form id="reject-reason-form" method="POST" action="{{ route('quote.reject') }}">
                    @csrf
                    <input type="hidden" name="quotation_id" value="{{ $quotation }}">
                </form>

                <!-- Reject Reason Input (hidden initially) -->
                <div class="mt-3" id="reject-reason-div" style="display: none;">
                    <textarea class="form-control mb-2" id="reject-reason" placeholder="Enter reason for rejection"></textarea>
                    <button id="submit-reject" class="btn btn-warning" type="button">Submit Reason</button>
                </div>

                <!-- Message -->
                <div class="mt-3" id="quote-message" style="display: none;"></div>



            </div>
        </div>






<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.0/dist/signature_pad.umd.min.js"></script>

<script>
const canvas = document.getElementById('signature-pad');
const signaturePad = new SignaturePad(canvas);

// Clear signature
document.getElementById('clear').addEventListener('click', () => signaturePad.clear());

// Save signature
document.getElementById('save').addEventListener('click', async () => {
    if (signaturePad.isEmpty()) {
        alert("Please provide a signature first.");
        return;
    }

    const dataUrl = signaturePad.toDataURL('image/png'); // Base64 string
    const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    const projectId = {{ $quote->id }};
    const url = "{{ url('store-sign') }}/" + projectId;

    const formData = new FormData();
    formData.append('signature', dataUrl);

    try {
        const response = await fetch(url, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': token },
            body: formData,
            credentials: 'same-origin'
        });

        const result = await response.text(); // just plain text
        alert(result); // shows "Signature saved successfully!"
    } catch (error) {
        console.error(error);
        alert("Failed to save signature.");
    }
});
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {

        const quoteActions = document.getElementById('quote-actions');
        const rejectDiv = document.getElementById('reject-reason-div');
        const submitRejectBtn = document.getElementById('submit-reject');
        const rejectReason = document.getElementById('reject-reason');
        const quoteMessage = document.getElementById('quote-message');
        const rejectBtn = document.getElementById('reject-btn');
        const rejectForm = document.getElementById('reject-reason-form'); // correct form

        const acceptForm = document.getElementById('accept-form');

        /* ---------------- ACCEPT QUOTE ---------------- */
        acceptForm.addEventListener('submit', function(e) {
            quoteActions.style.display = 'none';
            quoteMessage.innerHTML = "✅ Thank you! Our team will contact you soon.";
            quoteMessage.style.display = 'block';
        });

        /* ---------------- REJECT QUOTE CLICK ---------------- */
        rejectBtn.addEventListener('click', function(e) {
            quoteActions.style.display = 'none';
            rejectDiv.style.display = 'block';

            // Immediately update status to rejected via AJAX
            const quotationId = rejectForm.querySelector('input[name="quotation_id"]').value;

            fetch("{{ route('quote.reject') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify({
                    quotation_id: quotationId,
                    status_only: true // indicate that only status should change
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    quoteMessage.innerHTML = "❌ Quote status set to rejected. You can provide a reason below.";
                    quoteMessage.style.display = 'block';
                }
            })
            .catch(error => {
                console.error("Error updating status:", error);
            });
        });

        /* ---------------- SUBMIT REJECTION WITH REASON ---------------- */
        submitRejectBtn.addEventListener('click', function() {
            const reasonText = rejectReason.value.trim();

            if (reasonText === "") {
                alert("⚠ Please provide a reason before submitting.");
                return;
            }

            // Remove old input if exists (avoid duplicates)
            const existingInput = rejectForm.querySelector('input[name="reason"]');
            if (existingInput) existingInput.remove();

            // Add reason dynamically to form
            let reasonInput = document.createElement('input');
            reasonInput.type = 'hidden';
            reasonInput.name = 'reason';
            reasonInput.value = reasonText;
            rejectForm.appendChild(reasonInput);

            // Submit form normally
            rejectForm.submit();
        });

    });
</script>





@endsection