@extends('admin.layout.app')

@section('content')
<div class="content-wrapper">
    <section class="content py-2">
        <div class="container-fluid">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-edit"></i> Update Customer
                </h3>
            </div>
            <div class="row">
                <div class="col-md-12">
                    {{-- ✅ UPDATE FORM --}}
                    <form action=""
                          method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            {{-- LEFT FORM --}}
                            <div class="col-md-7">
                                <div class="card p-3">
                                    <div class="row">

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="name">Name</label>
                                                <input type="text" id="name" name="name" class="form-control"
                                                       value="{{ old('name', $customer->name) }}"
                                                       placeholder="Enter Name">
                                                @error('name')
                                                <span class="text-danger text-sm pull-right">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="phone">Phone</label>
                                                <input type="text" id="phone" name="phone" class="form-control"
                                                       value="{{ old('phone', $customer->phone) }}"
                                                       placeholder="Enter Contact">
                                                @error('phone')
                                                <span class="text-danger text-sm pull-right">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="nic">Cnic</label>
                                                <input type="number" id="nic" name="nic" class="form-control"
                                                       value="{{ old('nic', $customer->nic) }}"
                                                       placeholder="Enter cnic">
                                                @error('nic')
                                                <span class="text-danger text-sm pull-right">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="opening">Opening</label>
                                                <input type="number" id="opening" name="opening" class="form-control"
                                                       value="{{ old('opening', $customer->opening) }}"
                                                       placeholder="Enter Opening">
                                                @error('opening')
                                                <span class="text-danger text-sm pull-right">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="address">Address</label>
                                                <input type="text" id="address" name="address" class="form-control"
                                                       value="{{ old('address', $customer->address) }}"
                                                       placeholder="Enter Address">
                                                @error('address')
                                                <span class="text-danger text-sm pull-right">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-12 mt-2">
                                            <h5><b>Existing Documents</b></h5>
                                            <div class="row">
                                                @foreach($customer->getMedia('documents') as $doc)
                                                    <div class="col-md-4 mb-2">
                                                        <div class="card p-2 text-center">
                                                            <img src="{{ $doc->getUrl() }}"
                                                                class="img-fluid rounded"
                                                                style="height:120px; object-fit:cover; cursor:pointer;"
                                                                data-toggle="modal"
                                                                data-target="#docModal{{ $doc->id }}">
                                                            <button type="button"
                                                                    class="btn btn-danger btn-sm mt-2"
                                                                    onclick="deleteDoc({{ $doc->id }})">
                                                                Remove
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="modal fade" id="docModal{{ $doc->id }}" tabindex="-1" role="dialog" aria-hidden="true">
                                                        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                                            <div class="modal-content">

                                                                <div class="modal-header">
                                                                    <h5 class="modal-title">Document Preview</h5>
                                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                        <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                </div>

                                                                <div class="modal-body text-center">
                                                                    <img src="{{ $doc->getUrl() }}" class="img-fluid rounded">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- RIGHT CAMERA --}}
                            <div class="col-md-5">
                                <div class="card p-3">
                                    <h5><b>Capture New Documents (Laptop Camera)</b></h5>
                                    <video id="camera" autoplay playsinline muted
                                           style="width:100%; height:260px; border-radius:10px; background:black;">
                                    </video>
                                    <canvas id="snapshot" style="display:none;"></canvas>
                                    <div class="d-flex">
                                        <button type="button" class="btn btn-success btn-sm mt-2" id="startCameraBtn">
                                            ▶ Start Camera
                                        </button>

                                        <button type="button" class="btn btn-primary btn-sm mt-2 mx-2" id="captureBtn" disabled>
                                            📸 Capture Photo
                                        </button>

                                        <button type="button" class="btn btn-danger btn-sm mt-2" id="stopCameraBtn" disabled>
                                            ⛔ Stop Camera
                                        </button>
                                    </div>
                                    <div class="row mt-3" id="captured_preview_area"></div>
                                    <div id="hiddenInputs"></div>

                                </div>
                            </div>

                        </div>

                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary btn-sm float-right">
                                <i class="fas fa-save"></i> Update Record
                            </button>
                        </div>

                    </form>
                    {{-- ✅ END UPDATE FORM --}}

                </div>
            </div>

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

{{-- ✅ Hidden Delete Form OUTSIDE update form --}}
<form id="deleteDocForm" method="POST" style="display:none;">
    @csrf
    @method('DELETE')
</form>

{{-- ✅ Modal for viewing existing documents --}}
<div class="modal fade" id="docModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Document Preview</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body text-center">
                <img id="docModalImage" src="" class="img-fluid rounded">
            </div>
        </div>
    </div>
</div>
@endsection


@push('script')
    <script>
        // ✅ Preview existing document in modal
        function openDocModal(url) {
            document.getElementById("docModalImage").src = url;
            $('#docModal').modal('show');
        }

        // ✅ Delete existing document (NO nested form)
        function deleteDoc(id) {
            if (confirm("Delete this document?")) {
                let form = document.getElementById("deleteDocForm");
                form.action = "/admin/customer/document/" + id;
                form.submit();
            }
        }
    </script>

    <script>
        // ✅ CAMERA CAPTURE
        let video = document.getElementById("camera");
        let canvas = document.getElementById("snapshot");

        let startBtn = document.getElementById("startCameraBtn");
        let captureBtn = document.getElementById("captureBtn");
        let stopBtn = document.getElementById("stopCameraBtn");

        let previewArea = document.getElementById("captured_preview_area");
        let hiddenInputs = document.getElementById("hiddenInputs");

        let stream = null;
        let capturedImages = [];

        async function startCamera() {
            try {
                stream = await navigator.mediaDevices.getUserMedia({
                    video: true,
                    audio: false
                });

                video.srcObject = stream;

                captureBtn.disabled = false;
                stopBtn.disabled = false;

            } catch (err) {
                alert("Camera access denied or not available!");
                console.log(err);
            }
        }

        function stopCamera() {
            if (stream) {
                stream.getTracks().forEach(track => track.stop());
                stream = null;
                video.srcObject = null;
            }

            captureBtn.disabled = true;
            stopBtn.disabled = true;
        }

        function capturePhoto() {
            if (!stream) return alert("Please start camera first!");

            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;

            let ctx = canvas.getContext("2d");
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

            let imageData = canvas.toDataURL("image/jpeg", 0.9);
            capturedImages.push(imageData);

            renderImages();
        }

        function renderImages() {
            previewArea.innerHTML = "";
            hiddenInputs.innerHTML = "";

            capturedImages.forEach((img, index) => {
                previewArea.innerHTML += `
                    <div class="col-md-6 mb-2">
                        <div class="card p-2 text-center">
                            <img src="${img}" class="img-fluid rounded"
                                style="height:120px; object-fit:cover;">
                            <button type="button" class="btn btn-danger btn-sm mt-2"
                                    onclick="removeCaptured(${index})">
                                Remove
                            </button>
                        </div>
                    </div>
                `;

                hiddenInputs.innerHTML += `
                    <input type="hidden" name="camera_images[]" value="${img}">
                `;
            });
        }

        function removeCaptured(index) {
            capturedImages.splice(index, 1);
            renderImages();
        }

        startBtn.addEventListener("click", startCamera);
        captureBtn.addEventListener("click", capturePhoto);
        stopBtn.addEventListener("click", stopCamera);
    </script>

    <script>
        // ✅ Attach functions to buttons
        document.getElementById("startCameraBtn").addEventListener("click", startCamera);
        document.getElementById("captureBtn").addEventListener("click", capturePhoto);
        document.getElementById("stopCameraBtn").addEventListener("click", stopCamera);
    </script>
@endpush