@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $page_title = empty($expense->id) ? __('Create new Expense') : __('Edit Expense');
    @endphp

    @include('admin.partials.page_header')
@endsection

@section('content')
    <div class="container-fluid">
        <form id="expense-form" method="post"
            action="{{ empty($expense->id) ? route('expenses.store') : route('expenses.update', $expense->id) }}">
            @if (!empty($expense->id))
                @method('PATCH')
            @endif
            <div class="card">
                <div class="card-body">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div class="notes">(*) Datos obligatorios.</div>
                    </div>
                    <div class="form-group">
                        <label for="payment_date">*{{ __('Payment Date') }}</label>
                        <div class="input-group date col-md-11" id="calendar" data-target-input="nearest">
                            <div class="input-group-prepend" data-target="#calendar" data-toggle="datetimepicker">
                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                            </div>
                            <input id="payment_date" name="payment_date" type="text"
                                class="form-control datetimepicker-input" data-target="#calendar"
                                value="{{ $expense->payment_date_formatted ?? now()->format('d/m/Y') }}">
                        </div>
                        <span id="payment_date-error" class="invalid-feedback" style="font-weight:bold"
                            role="alert"></span>
                    </div>
                    <div class="form-group">
                        <label for="reminder">{{ __('Reminder') }}</label>
                        <div class="col-md-11">
                            <select class="form-control" name="reminder" id="reminder">
                                <option value="" @if (empty($expense->id) || $expense->reminder == '') selected @endif>Sin
                                    recordatorio</option>
                                <option value="Mismo Día" @if ($expense->reminder == 'Mismo Día') selected @endif>Mismo Día
                                </option>
                                <option value="1 Día antes" @if ($expense->reminder == '1 Día antes') selected @endif>1 Día
                                    antes</option>
                                <option value="2 Días antes" @if ($expense->reminder == '2 Días antes') selected @endif>2 Días
                                    antes</option>
                                <option value="3 Días antes" @if ($expense->reminder == '3 Días antes') selected @endif>3 Días
                                    antes</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row" id="remind_until_paid_section"
                        style="padding-top:5px;  @if (empty($expense->id) || $expense->reminder == '') display:none; @endif">
                        <div class="col d-flex align-items-center">
                            <div class="custom-control custom-switch" style="margin-left: 10px">
                                <input type="checkbox" class="custom-control-input" id="remind_until_paid"
                                    name="remind_until_paid"
                                    {{ !empty($expense->id) && $expense->remind_until_paid ? 'checked' : '' }}>
                                <label class="custom-control-label" for="remind_until_paid"
                                    style="font-weight:normal">{{ __('Remind until paid') }}</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="type">*{{ __('Type') }}</label>
                        <div class="col-md-11">
                            <select class="form-control type" name="type" id="type">
                                <option value="">{{ __('-- Select type --') }}</option>
                                <option value="Sin clasificar" @if (empty($expense->type) || $expense->type == 'Sin clasificar') selected @endif>
                                    Sin clasificar
                                </option>
                                <option value="Operativo" @if ($expense->type == 'Operativo') selected @endif>
                                    Operativo
                                </option>
                                <option value="Fijo" @if ($expense->type == 'Fijo') selected @endif>
                                    Fijo
                                </option>
                                <option value="Proyecto" @if ($expense->type == 'Proyecto') selected @endif>
                                    Proyecto
                                </option>
                            </select>
                            <span id="type-error" class="invalid-feedback" style="font-weight:bold" role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group" id="frequency_section">
                        <label for="frequency">{{ __('Frequency') }}</label>
                        <div class="col-md-11">
                            <select class="form-control frequency" name="frequency" id="frequency">
                                <option value="">{{ __('-- Select frequency --') }}</option>
                                <option value="No aplica" @if ($expense->frequency == 'No aplica') selected @endif>
                                    No aplica
                                </option>
                                <option value="Semanal" @if ($expense->frequency == 'Semanal') selected @endif>
                                    Semanal
                                </option>
                                <option value="Cada 2 semanas" @if ($expense->frequency == 'Cada 2 semanas') selected @endif>
                                    Cada 2 semanas
                                </option>
                                <option value="Mensual" @if ($expense->frequency == 'Mensual') selected @endif>
                                    Mensual
                                </option>
                                <option value="Bimestral" @if ($expense->frequency == 'Bimestral') selected @endif>
                                    Bimestral
                                </option>
                            </select>
                            <span id="frequency-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group" id="subclient_section">
                        <label for="subclient_id">*{{ __('Client') }}</label>
                        <div class="col-md-11">
                            <select class="form-control subclient_id" name="subclient_id" id="subclient_id">
                                <option value="">{{ __('-- Select client --') }}</option>
                                @foreach ($subclients as $subclient)
                                    <option value="{{ $subclient->id }}"
                                        @if ($expense->subclient_id == $subclient->id) selected @endif>
                                        {{ $subclient->name }}
                                    </option>
                                @endforeach
                            </select>
                            <span id="subclient_id-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group" id="project_section">
                        <label for="project_id">*{{ __('Project') }}</label>
                        <div class="col-md-11">
                            <select class="form-control project_id" name="project_id" id="project_id">
                                <option value="">{{ __('-- Select project --') }}</option>
                                @foreach ($projects as $project)
                                    <option value="{{ $project->id }}" data-subclient="{{ $project->subclient_id }}"
                                        @if ($expense->project_id == $project->id) selected @endif>
                                        {{ $project->name }}
                                    </option>
                                @endforeach
                            </select>
                            <span id="project_id-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="ref_number">{{ __('Invoice') }} / {{ __('Document Number') }}</label>
                        <div class="col-md-11">
                            <input class="form-control" id="ref_number" name="ref_number"
                                value="{{ $expense->ref_number ?? '' }}">
                            <span id="ref_number-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="provider_id">*{{ __('Provider') }}</label>
                        <div class="row">
                            <div class="col-10">
                                <select class="form-control" name="provider_id" id="provider_id">
                                    <option value="">{{ __('-- Select provider --') }}</option>
                                    @foreach ($providers as $provider)
                                        <option value="{{ $provider->id }}"
                                            @if (!empty($expense->id) && $provider->id == $expense->provider_id) selected @endif>
                                            {{ $provider->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <span id="provider_id-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                            <div class="col-1">
                                <button type="button" class="btn btn-default" id="addProviderButton"
                                    onclick="openProviderModal()" style="width: 100%;"><i class="fa-solid fa-plus"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="concept">*{{ __('Concept') }}</label>
                        <div class="col-md-11">
                            <input class="form-control" id="concept" name="concept"
                                value="{{ $expense->concept ?? '' }}">
                            <span id="concept-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="currency">*{{ __('Currency') }}</label>
                        <div class="col-md-11">
                            <select class="form-control" name="currency" id="currency">
                                <option value="">{{ __('-- Select currency --') }}</option>
                                <option value="Pesos" @if (empty($expense->id) || $expense->currency == 'Pesos') selected @endif>
                                    Pesos
                                </option>
                                <option value="Dólares" @if ($expense->currency == 'Dólares') selected @endif>
                                    Dólares
                                </option>
                                <option value="Euros" @if ($expense->currency == 'Euros') selected @endif>
                                    Euros
                                </option>
                            </select>
                            <span id="currency-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-11">
                            <label for="exchange_rate">*{{ __('Exchange Rate') }}</label>
                            <input class="form-control" id="exchange_rate" name="exchange_rate"
                                value="{{ $expense->exchange_rate ?? '' }}"
                                @if (empty($expense->id) || $expense->moneda == 'Pesos') disabled @endif>
                            <span id="exchange_rate-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="total">*{{ __('Total') }}</label>
                        <div class="col-md-11">
                            <input class="form-control total" id="total" name="total"
                                value="${{ number_format($expense->amount ?? 0, 2) }}">
                            <span id="total-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="ref_document">{{ __('Document') }}</label>
                        <span id="documentUploaded"
                            style="margin-left:10px;font-size:smaller; font-style: italic; color:dimgray; @if (empty($expense->ref_document)) display:none @endif">
                            {{ __('File Saved') }}
                        </span>
                        <!-- Step 1: Initial Selection Buttons -->
                        {{-- <div id="initialSelection">
                            <button type="button" id="choosePhotoBtn">📷 Take a Photo</button>
                            <button type="button" id="chooseUploadBtn">📄 Upload Document</button>
                        </div> --}}

                        <!-- Step 2: Take Photo Section (Initially Hidden) -->
                        {{-- <div id="photoSection" style="display: none;">
                            <button type="button" id="captureBtn">📷 Take Photo</button>
                            <video id="video" style="display:none;" autoplay></video>
                            <canvas id="canvas" style="display:none;"></canvas>
                            <input type="hidden" name="captured_image" id="captured_image">
                            <img id="photo_preview" style="display:none; max-width: 200px;">
                            <button type="button" id="switchToUploadBtn">📄 Upload Document</button>
                        </div> --}}

                        <!-- Step 2: Upload Document Section (Initially Hidden) -->
                        {{-- <div id="documentUploadSection" style="display: none;"> --}}
                        <div class="col-md-11" id="documentUploadSection">
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="ref_document" name="ref_document"
                                    autocomplete="off">
                                <label class="custom-file-label" for="ref_document">{{ __('Choose file') }}</label>
                            </div>
                            {{-- <button type="button" id="switchToPhotoBtn">📷 Take Photo</button> --}}
                        </div>
                    </div>
                </div>
            </div>
            {{-- buttons --}}
            <div class="card">
                <div class="card-body">
                    <div class="form-group row" style="margin-bottom:0">
                        <a href="javascript:loadContent('{{ route('expenses.index') }}')" id="cancel" name="cancel"
                            class="btn btn-default custom-btn">{{ __('Cancel') }}</a>
                        <button type="submit"
                            class="btn btn-info custom-btn">{{ empty($expense->id) ? __('Create') : __('Save') }}</button>
                    </div>
                </div>
            </div>
            <br>
        </form>
    </div>
    <!-- provider Modal -->
    <div class="modal fade" id="providerModal" tabindex="-1" role="dialog" aria-labelledby="providerModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="providerModalLabel">{{ __('Create Provider') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="expense-provider-form" method="post" action="{{ route('providers.store') }}">
                    <div class="modal-body" id="provider">
                        <input type="hidden" id="modal_view" name="modal_view" value="1" />
                        <div class="form-group row">
                            <label for="name" class="col-md-2 col-form-label">*{{ __('Name') }}</label>
                            <div class="col-md-10">
                                <input class="form-control name" id="name" name="name">
                                <span id="name-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            {{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-info" id="saveProviderButton">
                            {{ __('Add') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        $(function() {
            bsCustomFileInput.init();
        });

        $('#payment_date').on('focus', function() {
            $('#calendar').datetimepicker('show');
        });

        $('#calendar').datetimepicker({
            format: 'DD/MM/YYYY',
            locale: 'es',
        });

        toggleType();
        toggleExchangeRateEnabled();
        toggleProjects();

        document.getElementById('type').addEventListener('change', function() {
            toggleType();
        });

        document.getElementById('currency').addEventListener('change', function() {
            toggleExchangeRateEnabled();
        });

        document.getElementById('reminder').addEventListener('change', function() {
            toggleRemindUntilPaid();
        });

        $("#subclient_id").change(function() {
            toggleProjects();

            $("#project_id").val("");
        });

        $('#total').on('focus', function() {
            $(this).select();
        });

        $('#total').on('blur', function() {
            var amount = parseFloat($("#total").val().replace(/[^0-9.]/g, '')) || 0;
            $('#total').val(currencyFormat(amount));
        });

        $('#choosePhotoBtn').on('click', function() {
            $('#initialSelection').hide(); // Hide initial selection buttons
            $('#photoSection').show(); // Show photo capture section
            $('#documentUploadSection').hide(); // Hide upload section
        });

        // Step 1: Show Upload Document Section (Keep Take Photo Button)
        $('#chooseUploadBtn').on('click', function() {
            $('#initialSelection').hide(); // Hide initial selection buttons
            $('#documentUploadSection').show(); // Show upload section
            $('#photoSection').hide(); // Hide photo section
        });

        // Step 2: Switch to Upload Document
        $('#switchToUploadBtn').on('click', function() {
            $('#photoSection').hide(); // Hide photo section
            $('#documentUploadSection').show(); // Show upload section
        });

        // Step 2: Switch to Take Photo
        $('#switchToPhotoBtn').on('click', function() {
            $('#documentUploadSection').hide(); // Hide upload section
            $('#photoSection').show(); // Show photo section
        });

        // Capture photo functionality
        $('#captureBtn').on('click', function(e) {
            e.preventDefault(); // Prevent form submission

            var video = $('#video')[0];
            var canvas = $('#canvas')[0];
            var context = canvas.getContext('2d');

            if ($('#video').is(':hidden')) {
                $('#video').show();
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                    navigator.mediaDevices.getUserMedia({
                            video: {
                                facingMode: "environment"
                            }
                        })
                        .then(function(stream) {
                            $('#video')[0].srcObject = stream;
                        })
                        .catch(function(error) {
                            console.error('Error accessing webcam: ', error);
                        });
                } else {
                    alert('Your browser does not support webcam access.');
                }
            } else {
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                context.drawImage(video, 0, 0, canvas.width, canvas.height);

                var imageData = canvas.toDataURL('image/png');
                $('#photo_preview').attr('src', imageData).show();
                $('#captured_image').val(imageData);

                $('#ref_document').val('');
                $('.custom-file-label').text('Choose file'); // Reset label text

                let stream = video.srcObject;
                let tracks = stream.getTracks();
                tracks.forEach(track => track.stop());

                $('#video').hide();
            }
        });

        $('#ref_document').on('change', function() {
            // Clear captured image input when a document is selected
            $('#captured_image').val('');
            $('#photo_preview').hide().attr('src', '');
        });

        function toggleType() {
            var type = $('#type').val();
            if (type == 'Fijo') {
                $('#frequency_section').show();
            } else {
                $('#frequency_section').hide();
                $("#frequency").val("");
            }
            if (type == 'Proyecto') {
                $('#subclient_section').show();
                $('#project_section').show();
            } else {
                $("#subclient_id").val("");
                $("#project_id").val("");
                $('#subclient_section').hide();
                $('#project_section').hide();
            }
        }

        function toggleProjects() {
            var subclient_id = $("#subclient_id").val();

            $("#project_id option").each(function() {
                var subclient = $(this).data("subclient");

                if (!subclient_id || subclient == subclient_id) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        }

        function toggleExchangeRateEnabled() {
            var currency = $('#currency').val();
            if (currency === 'Pesos') {
                $('#exchange_rate').prop('disabled', true);
            } else {
                $('#exchange_rate').prop('disabled', false);
            }
        }

        function toggleRemindUntilPaid() {
            var reminder = $('#reminder').val();

            if (reminder != '') {
                $('#remind_until_paid_section').show();
            } else {
                $('#remind_until_paid').prop('checked', false);
                $('#remind_until_paid_section').hide();
            }
        }

        function openProviderModal() {

            $('.invalid-feedback').text('').css('display', 'none');

            $('#providerModal #name').val('');
            $('#providerModal').modal('show');
        }

        function buildProvidersList(providers, selectedId) {
            var select = $('#provider_id');

            select.find('option').not(':first').remove();

            providers.forEach(function(provider) {
                var option = $('<option></option>')
                    .val(provider.id)
                    .text(provider.name);
                select.append(option);
            });

            select.val(selectedId);
        }
    </script>
@endsection