@php
    $edit = !is_null($dataTypeContent->getKey());
    $add  = is_null($dataTypeContent->getKey());
@endphp

@extends('voyager::master')

@section('css')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@stop

@section('page_title', __('voyager::generic.'.($edit ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular'))

@section('page_header')
    <h1 class="page-title">
        <i class="{{ $dataType->icon }}"></i>
        {{ __('voyager::generic.'.($edit ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular') }}
    </h1>
    @include('voyager::multilingual.language-selector')
@stop

@section('content')
    <div class="page-content edit-add container-fluid">
        <div class="row">
            <div class="col-md-12">

                <div class="panel panel-bordered">
                    <!-- form start -->
                    <form role="form"
                            class="form-edit-add"
                            action="{{ $edit ? route('voyager.'.$dataType->slug.'.update', $dataTypeContent->getKey()) : route('voyager.'.$dataType->slug.'.store') }}"
                            method="POST" enctype="multipart/form-data">
                        <!-- PUT Method if we are editing -->
                        @if($edit)
                            {{ method_field("PUT") }}
                        @endif

                        <!-- CSRF TOKEN -->
                        {{ csrf_field() }}

                        <div class="panel-body">

                            @if (count($errors) > 0)
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <!-- Adding / Editing -->
                            @php
                                $dataTypeRows = $dataType->{($edit ? 'editRows' : 'addRows' )};
                            @endphp

                            @foreach($dataTypeRows as $row)
                                <!-- GET THE DISPLAY OPTIONS -->
                                @php
                                    $display_options = $row->details->display ?? NULL;
                                    if ($dataTypeContent->{$row->field.'_'.($edit ? 'edit' : 'add')}) {
                                        $dataTypeContent->{$row->field} = $dataTypeContent->{$row->field.'_'.($edit ? 'edit' : 'add')};
                                    }
                                @endphp
                                @if (isset($row->details->legend) && isset($row->details->legend->text))
                                    <legend class="text-{{ $row->details->legend->align ?? 'center' }}" style="background-color: {{ $row->details->legend->bgcolor ?? '#f0f0f0' }};padding: 5px;">{{ $row->details->legend->text }}</legend>
                                @endif

                                <div class="form-group @if($row->type == 'hidden') hidden @endif col-md-{{ $display_options->width ?? 6 }} {{ $errors->has($row->field) ? 'has-error' : '' }}" @if(isset($display_options->id)){{ "id=$display_options->id" }}@endif>
                                    {{ $row->slugify }}
                                    <label class="control-label" for="name">{{ $row->getTranslatedAttribute('display_name') }}</label>
                                    @include('voyager::multilingual.input-hidden-bread-edit-add')
                                    @if ($add && isset($row->details->view_add))
                                        @include($row->details->view_add, ['row' => $row, 'dataType' => $dataType, 'dataTypeContent' => $dataTypeContent, 'content' => $dataTypeContent->{$row->field}, 'view' => 'add', 'options' => $row->details])
                                    @elseif ($edit && isset($row->details->view_edit))
                                        @include($row->details->view_edit, ['row' => $row, 'dataType' => $dataType, 'dataTypeContent' => $dataTypeContent, 'content' => $dataTypeContent->{$row->field}, 'view' => 'edit', 'options' => $row->details])
                                    @elseif (isset($row->details->view))
                                        @include($row->details->view, ['row' => $row, 'dataType' => $dataType, 'dataTypeContent' => $dataTypeContent, 'content' => $dataTypeContent->{$row->field}, 'action' => ($edit ? 'edit' : 'add'), 'view' => ($edit ? 'edit' : 'add'), 'options' => $row->details])
                                    @elseif ($row->type == 'relationship')
                                        @include('voyager::formfields.relationship', ['options' => $row->details])
                                    @else
                                        {!! app('voyager')->formField($row, $dataType, $dataTypeContent) !!}
                                    @endif

                                    @foreach (app('voyager')->afterFormFields($row, $dataType, $dataTypeContent) as $after)
                                        {!! $after->handle($row, $dataType, $dataTypeContent) !!}
                                    @endforeach
                                    @if ($errors->has($row->field))
                                        @foreach ($errors->get($row->field) as $error)
                                            <span class="help-block">{{ $error }}</span>
                                        @endforeach
                                    @endif
                                </div>
                            @endforeach

                            {{-- ==== CUSTOM: Image Upload (Photo ID) ==== --}}
                            

                            <div class="col-md-12" id="diamondimageuploadsection">
                                <label class="col-sm-3 col-form-label">Image Upload Option</label>
                                
                                <div class="col-sm-9">
                                    <label class="me-3">
                                        <input type="radio" name="inputOption" value="file" checked> System File
                                    </label>
                                    <label>
                                        <input type="radio" name="inputOption" value="camera"> Camera
                                    </label>
                                    <p class="mb-0"><strong>Note:</strong> This option won't be shown on some devices.</p>
                                </div>
                            </div>

                            <div class="col-md-12 mb-4">
                                <label class="col-sm-3 col-form-label">Please Upload Your Photo ID</label>
                                <div class="col-sm-9">
                                    <div id="fileInputContainer">
                                        <input type="file" class="form-control" id="compulsory_buying_form_image" name="compulsory_buying_form_image[]" multiple accept="image/*">
                                    </div>

                                    <div id="cameraContainer" style="display:none;">
                                        <div class="row mb-4" style="display:flex;align-items:center;">
                                            <div class="col-sm-6" style="flex:1;">
                                                <video id="video" class="mb-2" style="width:100%;max-width:400px;border:1px solid #ccc" autoplay></video>
                                                <button id="capture" type="button" class="btn btn-primary mt-2" style="width:100%;">Capture</button>
                                            </div>
                                            <div class="col-sm-6" style="flex:1;">
                                                <img id="setPhotoImage" alt="Captured Photo" style="display:none;width:100%;max-width:400px;border:1px solid #ccc" />
                                                <canvas id="canvas" style="display:none;"></canvas>
                                                <input type="hidden" id="imageDataHidden" name="setPhotoImage" />
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Existing images (Photo ID) --}}
                                    <div class="mt-2" style="display:flex;flex-wrap:wrap;gap:6px;">
                                        @php
                                            use Illuminate\Support\Str;
                                            $imageExtensions = ['jpg','jpeg','png','webp','gif','bmp'];
                                        @endphp

                                        @isset($uploadPhoto)
                                            @forelse($uploadPhoto as $dataAdditional)
                                                @php
                                                    $path = $dataAdditional->file_name ?? '';
                                                    $fileUrl = $path ? asset($path) : '';
                                                    $ext = Str::of($path)->lower()->afterLast('.');
                                                    $isImage = $ext && in_array($ext, $imageExtensions, true);
                                                @endphp

                                                @if($fileUrl)
                                                    @if($isImage)
                                                        <div class="image-item" style="position:relative;width:100px;height:100px;border:1px solid #ccc;">
                                                            <a download target="_blank" href="{{ $fileUrl }}">
                                                                <img src="{{ $fileUrl }}" alt="Photo" style="width:100%;height:100%;object-fit:cover;">
                                                            </a>
                                                            <button
                                                                onclick="commonDeleteImage(this,'buying_form')"
                                                                type="button"
                                                                class="btn btn-danger btn-sm delete-image"
                                                                id="buying_form_file"
                                                                style="position:absolute;top:0;right:0;"
                                                                data-image-id="{{ $dataAdditional->id }}"
                                                            >
                                                                <i class="fas fa-trash-alt"></i>
                                                            </button>
                                                        </div>
                                                    @else
                                                        <div class="image-item" style="position:relative;width:100px;height:100px;border:1px solid #ccc;text-align:center;line-height:100px;">
                                                            <a download href="{{ $fileUrl }}" style="text-decoration:none;">{{ $ext }}</a>
                                                            <button
                                                                onclick="commonDeleteImage(this,'buying_form')"
                                                                type="button"
                                                                class="btn btn-danger btn-sm delete-image"
                                                                id="buying_form_file"
                                                                style="position:absolute;top:0;right:0;"
                                                                data-image-id="{{ $dataAdditional->id }}"
                                                            >
                                                                <i class="fas fa-trash-alt"></i>
                                                            </button>
                                                        </div>
                                                    @endif
                                                @endif
                                            @empty
                                                <span>No Image</span>
                                            @endforelse
                                        @else
                                            <span>No Image</span>
                                        @endisset
                                    </div>

                                    <p id="buying_form_message" class="mt-2"></p>
                                </div>
                            </div>

                            {{-- ==== CUSTOM: Image Upload (Item Bought) ==== --}}
                            <div class="col-md-12 mb-4" id="imageBoughtuploadsection">
                                <label class="col-sm-3 col-form-label">Image Upload Option</label>
                                <div class="col-sm-9">
                                    <label class="me-3">
                                        <input type="radio" name="boughtOption" value="file" checked> System File
                                    </label>
                                    <label>
                                        <input type="radio" name="boughtOption" value="camera"> Camera
                                    </label>
                                    <p class="mb-0"><strong>Note:</strong> This option won't be shown on some devices.</p>
                                </div>
                            </div>

                            <div class="col-md-12 mb-4">
                                <label class="col-sm-3 col-form-label">Please Upload Item Bought Image</label>
                                <div class="col-sm-9">
                                    <div id="fileInputBoughtContainer">
                                        <input type="file" class="form-control" id="item_bought_image" name="item_bought_image[]" multiple accept="image/*">
                                    </div>

                                    <div id="cameraBoughtContainer" style="display:none;">
                                        <div class="row mb-4" style="display:flex;align-items:center;">
                                            <div class="col-sm-6" style="flex:1;">
                                                <video id="video2" class="mb-2" style="width:100%;max-width:400px;border:1px solid #ccc" autoplay></video>
                                                <button id="capture2" type="button" class="btn btn-primary mt-2" style="width:100%;">Capture</button>
                                            </div>
                                            <div class="col-sm-6" style="flex:1;">
                                                <img id="setBoughtPhotoImage" alt="Captured Photo" style="display:none;width:100%;max-width:400px;border:1px solid #ccc" />
                                                <canvas id="canvas2" style="display:none;"></canvas>
                                                <input type="hidden" id="imageBoughtDataHidden" name="setBoughtPhotoImage" />
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Existing images (reuse same $uploadPhoto set if that’s what you have for this section; swap if you have a different collection) --}}
                                    <div class="mt-2" style="display:flex;flex-wrap:wrap;gap:6px;">
                                        @isset($uploadPhoto)
                                            @forelse($uploadPhoto as $dataAdditional)
                                                @php
                                                    $path = $dataAdditional->file_name ?? '';
                                                    $fileUrl = $path ? asset($path) : '';
                                                    $ext = Str::of($path)->lower()->afterLast('.');
                                                    $isImage = $ext && in_array($ext, $imageExtensions, true);
                                                @endphp

                                                @if($fileUrl)
                                                    @if($isImage)
                                                        <div class="image-item" style="position:relative;width:100px;height:100px;border:1px solid #ccc;">
                                                            <a download target="_blank" href="{{ $fileUrl }}">
                                                                <img src="{{ $fileUrl }}" alt="Photo" style="width:100%;height:100%;object-fit:cover;">
                                                            </a>
                                                            <button
                                                                onclick="commonDeleteImage(this,'buying_form')"
                                                                type="button"
                                                                class="btn btn-danger btn-sm delete-image"
                                                                id="buying_form_file"
                                                                style="position:absolute;top:0;right:0;"
                                                                data-image-id="{{ $dataAdditional->id }}"
                                                            >
                                                                <i class="fas fa-trash-alt"></i>
                                                            </button>
                                                        </div>
                                                    @else
                                                        <div class="image-item" style="position:relative;width:100px;height:100px;border:1px solid #ccc;text-align:center;line-height:100px;">
                                                            <a download href="{{ $fileUrl }}" style="text-decoration:none;">{{ $ext }}</a>
                                                            <button
                                                                onclick="commonDeleteImage(this,'buying_form')"
                                                                type="button"
                                                                class="btn btn-danger btn-sm delete-image"
                                                                id="buying_form_file"
                                                                style="position:absolute;top:0;right:0;"
                                                                data-image-id="{{ $dataAdditional->id }}"
                                                            >
                                                                <i class="fas fa-trash-alt"></i>
                                                            </button>
                                                        </div>
                                                    @endif
                                                @endif
                                            @empty
                                                <span>No Image</span>
                                            @endforelse
                                        @else
                                            <span>No Image</span>
                                        @endisset
                                    </div>

                                    <p id="buying_form_message" class="mt-2"></p>
                                </div>
                            </div>

                        </div><!-- panel-body -->
                        

                        <div class="panel-footer">
                            @section('submit-buttons')
                                <button type="submit" class="btn btn-primary save">{{ __('voyager::generic.save') }}</button>
                            @stop
                            @yield('submit-buttons')
                        </div>
                    </form>

                    <div style="display:none">
                        <input type="hidden" id="upload_url" value="{{ route('voyager.upload') }}">
                        <input type="hidden" id="upload_type_slug" value="{{ $dataType->slug }}">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade modal-danger" id="confirm_delete_modal">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">&times;</button>
                    <h4 class="modal-title"><i class="voyager-warning"></i> {{ __('voyager::generic.are_you_sure') }}</h4>
                </div>

                <div class="modal-body">
                    <h4>{{ __('voyager::generic.are_you_sure_delete') }} '<span class="confirm_delete_name"></span>'</h4>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
                    <button type="button" class="btn btn-danger" id="confirm_delete">{{ __('voyager::generic.delete_confirm') }}</button>
                </div>
            </div>
        </div>
    </div>
    <!-- End Delete File Modal -->
@stop

@section('javascript')
    <script>
        var params = {};
        var $file;

        function deleteHandler(tag, isMulti) {
          return function() {
            $file = $(this).siblings(tag);

            params = {
                slug:   '{{ $dataType->slug }}',
                filename:  $file.data('file-name'),
                id:     $file.data('id'),
                field:  $file.parent().data('field-name'),
                multi: isMulti,
                _token: '{{ csrf_token() }}'
            }

            $('.confirm_delete_name').text(params.filename);
            $('#confirm_delete_modal').modal('show');
          };
        }

        $('document').ready(function () {
            $('.toggleswitch').bootstrapToggle();

            //Init datepicker for date fields if data-datepicker attribute defined
            //or if browser does not handle date inputs
            $('.form-group input[type=date]').each(function (idx, elt) {
                if (elt.hasAttribute('data-datepicker')) {
                    elt.type = 'text';
                    $(elt).datetimepicker($(elt).data('datepicker'));
                } else if (elt.type != 'date') {
                    elt.type = 'text';
                    $(elt).datetimepicker({
                        format: 'L',
                        extraFormats: [ 'YYYY-MM-DD' ]
                    }).datetimepicker($(elt).data('datepicker'));
                }
            });

            @if ($isModelTranslatable)
                $('.side-body').multilingual({"editing": true});
            @endif

            $('.side-body input[data-slug-origin]').each(function(i, el) {
                $(el).slugify();
            });

            $('.form-group').on('click', '.remove-multi-image', deleteHandler('img', true));
            $('.form-group').on('click', '.remove-single-image', deleteHandler('img', false));
            $('.form-group').on('click', '.remove-multi-file', deleteHandler('a', true));
            $('.form-group').on('click', '.remove-single-file', deleteHandler('a', false));

            $('#confirm_delete').on('click', function(){
                $.post('{{ route('voyager.'.$dataType->slug.'.media.remove') }}', params, function (response) {
                    if ( response
                        && response.data
                        && response.data.status
                        && response.data.status == 200 ) {

                        toastr.success(response.data.message);
                        $file.parent().fadeOut(300, function() { $(this).remove(); })
                    } else {
                        toastr.error("Error removing file.");
                    }
                });

                $('#confirm_delete_modal').modal('hide');
            });
            $('[data-toggle="tooltip"]').tooltip();
        });


        function startCameraStream(video) {
            navigator.mediaDevices.getUserMedia({ video: true })
                .then(stream => {
                    video.srcObject = stream;
                    video.play();
                })
                .catch(err => {
                    console.error("Error accessing camera: ", err);
                });
        }

        //Upload Images Of Your ID section start

        const fileInputContainer = document.getElementById('fileInputContainer');
        const cameraContainer = document.getElementById('cameraContainer');
        const video = document.getElementById('video');
        const captureButton = document.getElementById('capture');
        const canvas = document.getElementById('canvas');
        const photo = document.getElementById('setPhotoImage');
        const context = canvas.getContext('2d');
        var imageDataHidden = document.getElementById('imageDataHidden');


        // Function to toggle between file and camera
        const inputOptions = document.querySelectorAll('input[name="inputOption"]');

        inputOptions.forEach(option => {
            option.addEventListener('change', function() {
                if (this.value === 'file') {
                    fileInputContainer.style.display = 'block';
                    cameraContainer.style.display = 'none';
                    stopVideoStream(video); // Stop camera stream if active
                } else if (this.value === 'camera') {
                    fileInputContainer.style.display = 'none';
                    cameraContainer.style.display = 'block';
                    startCameraStream(video); // Start camera stream
                }
            });
        });

        // Capture the photo when the button is clicked
        captureButton.addEventListener('click', (e) => {
            e.preventDefault();
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
            const dataURL = canvas.toDataURL('image/png');
            photo.src = dataURL;
            photo.style.display = 'block';
            imageDataHidden.value = dataURL;

        });
     //Upload Images Of Your ID section end


      //Item BoughtUpload start 
    const additionalContainer = document.getElementById('fileInputBoughtContainer');
    const additionalcameraContainer = document.getElementById('cameraBoughtContainer');
    const video2 = document.getElementById('video2');
    const capture2 = document.getElementById('capture2');
    const canvas2 = document.getElementById('canvas2');
    const additionalPhotoImage = document.getElementById('setBoughtPhotoImage');
    const context2 = canvas2.getContext('2d');
    var additionalImageDataHidden = document.getElementById('imageBoughtDataHidden');

    
    // Function to toggle between file and camera
    const inputOptions2 = document.querySelectorAll('input[name="boughtOption"]');
    inputOptions2.forEach(option2 => {
        option2.addEventListener('change', function() {
            if (this.value === 'file') {
                additionalContainer.style.display = 'block';
                additionalcameraContainer.style.display = 'none';
                stopVideoStream(video2); // Stop camera stream if active
            } else if (this.value === 'camera') {
                additionalContainer.style.display = 'none';
                additionalcameraContainer.style.display = 'block';
                startCameraStream(video2); // Start camera stream
            }
        });
    });

  
    // Capture the photo when the button is clicked
        capture2.addEventListener('click', (e) => {
            e.preventDefault();
            canvas2.width = video2.videoWidth;
            canvas2.height = video2.videoHeight;
            context2.drawImage(video2, 0, 0, canvas2.width, canvas2.height);
            const dataURL2 = canvas2.toDataURL('image/png');
            additionalPhotoImage.src = dataURL2;
            additionalPhotoImage.style.display = 'block';
            additionalImageDataHidden.value = dataURL2;

        });
    // <input type="hidden" id="imageBoughtDataHidden" name="setBoughtPhotoImage" />
      //Item BoughtUpload end 
    </script>
@stop