@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $page_title = __('Preview Quote');
    @endphp

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

@section('content')
    <div class="container-fluid">
        <div class="row">

            {{-- Preview --}}
            <div class="col-md-9">
                <div class="card">
                    <div class="card-body">
                        <div class="alert alert-danger" style="display:none"></div>
                        <div class="alert alert-success" style="display:none"></div>
                        <div class="print-only">

                            <div class="row">
                                <div class="col-6">
                                    <h2 class="page-header">
                                        @if (!empty($quote->client->logo))
                                            <img src="{{ asset('storage/logos/' . $quote->client->logo) }}" alt="Logo"
                                                style="max-width: 120px; max-height: 120px;">
                                        @else
                                            {{ $quote->client->name }}
                                        @endif
                                    </h2>
                                </div>
                                <div class="col-6">
                                    <small class="float-right">{{ __('Date') }}:
                                        {{ $quote->updated_at_formatted }}</small>
                                </div>
                            </div>

                            <div class="divider mt-2 mb-4"></div>

                            <div class="row">
                                <div class="col-sm-6">
                                    <strong>At'n: {{ $quote->contact->name }}</strong><br>
                                    {{ $quote->subclient->name }}<br>
                                    {{ $quote->subclient->address }}<br>
                                    Phone: {{ $quote->contact->phone }}<br>
                                    Email: {{ $quote->contact->email }}
                                </div>
                                <div class="col-sm-6 text-right">
                                    <b>{{ __('Quote Number') }} {{ $quote->quote_number }}</b>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-12 pt-4">
                                    <b>{{ $quote->title }}</b>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-12 pb-4">
                                    <p>{!! $quote->description !!}</p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 table-responsive">
                                    <table class="table table-striped mb-0">
                                        <thead>
                                            <tr>
                                                @if ($quote->items->contains(fn($item) => !empty($item->image)))
                                                    <th>{{ __('Image') }}</th>
                                                @endif
                                                <th>{{ __('Quantity') }}</th>
                                                <th>{{ __('Description') }}</th>
                                                <th>{{ __('Unit') }}</th>
                                                <th class="col-price" style="text-align: right">{{ __('Selling Price') }}
                                                </th>
                                                <th class="col-price" style="text-align: right">{{ __('Total') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if ($quote->items->isNotEmpty())
                                                @foreach ($quote->items as $item)
                                                    <tr>
                                                        @if ($quote->items->contains(fn($item) => !empty($item->image)))
                                                            <td>
                                                                @if ($item->image)
                                                                    <a href="javascript:void(0);"
                                                                        onclick="openImageModal('{{ $item->image }}')">
                                                                        <img src="{{ asset('storage/images/' . $item->image) }}"
                                                                            alt="Service Image"
                                                                            style="width: 80px; height: 80px; object-fit: contain;">
                                                                    </a>
                                                                @endif
                                                            </td>
                                                        @endif
                                                        <td>{{ $item->quantity }}</td>
                                                        <td>{!! urldecode($item->description) !!}</td>
                                                        <td>{{ $item->unit }}</td>
                                                        <td class="col-price" style="text-align: right">
                                                            ${{ number_format($item->price, 2) }}
                                                        </td>
                                                        <td class="col-price" style="text-align: right">
                                                            ${{ number_format($item->amount, 2) }}
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @endif
                                            <tr style="{{ $quote->items->isEmpty() ? '' : 'display:none;' }}">
                                                <td colspan="10">No se han agregado partidas</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="divider mt-0 mb-3"></div>

                            <div class="row">
                                <div class="col-md-4 offset-md-8">
                                    <div class="table-responsive">
                                        <table class="table totals-table">
                                            @if ($quote->iva_pct > 0 || $quote->discount_pct > 0)
                                                <tr>
                                                    <th>Subtotal:</th>
                                                    <td>${{ number_format($quote->subtotal, 2) }}</td>
                                                </tr>
                                            @endif
                                            @if ($quote->discount_pct > 0)
                                                <tr>
                                                    <th>Descuento ({{ $quote->discount_pct }}%):</th>
                                                    <td>${{ number_format($quote->discount_amount, 2) }}</td>
                                                </tr>
                                            @endif
                                            @if ($quote->iva_pct > 0)
                                                <tr>
                                                    <th>I.V.A. ({{ $quote->iva_pct }}%):</th>
                                                    <td>${{ number_format($quote->iva_amount, 2) }}</td>
                                                </tr>
                                            @endif
                                            <tr>
                                                <th>Total:</th>
                                                <td>${{ number_format($quote->total, 2) }}</td>
                                            </tr>
                                            @if ($quote->advance_pct > 0)
                                                <tr>
                                                    <th>Anticipo: {{ $quote->advance_pct }}%</th>
                                                    <td>${{ number_format($quote->advance_amount, 2) }}</td>
                                                </tr>
                                            @endif
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="divider mt-0 mb-4"></div>

                            <div class="row">
                                <div class="col-12">
                                    <strong>{{ __('Terms') }}:</strong>
                                    <p style="margin-top: 10px;">
                                        {!! $terms !!}
                                    </p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="signature col-12">
                                    <b>Atte. {{ $quote->user->name }}</b>
                                </div>
                            </div>

                            <div class="row">
                                <div class="footer col-12">
                                    {{ $quote->client->direccion_comercial }}
                                    {!! !empty($quote->user->phone) ? '<br>Tel. ' . $quote->user->phone : '' !!}

                                    <br><br>

                                    @php
                                        $status = trim($quote->status);
                                        $quote_status = match ($status) {
                                            'Enviada' => 'En espera de aprobación',
                                            'Aprobada' => 'Aprobada',
                                            'Facturada' => 'Facturada',
                                            default => ucfirst($status),
                                        };
                                    @endphp

                                    <span style="font-weight:bold">{{ __('Quote status') }}: {{ $quote_status }}</span>
                                </div>
                            </div>

                        </div>

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

            {{-- Right panel --}}
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <div class="no-print">
                            <div class="form-group row">
                                <div class="col d-flex align-items-center">
                                    <label for="subtotal" class="mr-auto mb-0">{{ __('Subtotal') }}</label>
                                    <div class="ml-auto" style="width: 120px;">
                                        <input type="text" name="subtotal" id="subtotal"
                                            class="input-nooutline text-right" readonly
                                            value="${{ number_format($quote->subtotal, 2) ?? '0' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" id="discount_row">
                                <div class="col d-flex align-items-center">
                                    <label for="discount_amount" class="mr-auto mb-0">{{ __('Discount') }}</label>
                                    <div class="ml-auto" style="width: 120px;">
                                        <input type="text" name="discount_amount" id="discount_amount"
                                            class="input-nooutline text-right"
                                            value="${{ number_format($quote->discount_amount, 2) ?? '0' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" id="iva_row">
                                <div class="col d-flex align-items-center">
                                    <label for="iva_amount" class="mr-auto mb-0">{{ __('Tax') }}</label>
                                    <div class="ml-auto" style="width: 120px;">
                                        <input type="text" name="iva_amount" id="iva_amount"
                                            class="input-nooutline text-right"
                                            value="${{ number_format($quote->iva_amount, 2) ?? '0' }}">
                                    </div>
                                </div>
                            </div>
                            <hr class="separator" style="margin: 15px 0;">
                            <div class="form-group row">
                                <div class="col d-flex align-items-center">
                                    <label for="total" class="mr-auto mb-0">{{ __('Total') }}</label>
                                    <div class="ml-auto" style="width: 120px;">
                                        <input type="text" name="total" id="total"
                                            class="input-nooutline text-right"
                                            value="${{ number_format($quote->total, 2) ?? '0' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" id="advance_row">
                                <div class="col d-flex align-items-center">
                                    <label for="advance_amount" class="mr-auto mb-0">{{ __('Advance') }}</label>
                                    <div class="ml-auto" style="width: 120px;">
                                        <input type="text" name="advance_amount" id="advance_amount"
                                            class="input-nooutline text-right"
                                            value="${{ number_format($quote->advance_amount, 2) ?? '0' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" style="padding-bottom:20px">
                                <div class="col d-flex align-items-center">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="showTotalOnly"
                                            {{ !empty($quote->id) && $quote->show_total_only ? 'checked' : '' }}>
                                        <label class="custom-control-label"
                                            for="showTotalOnly">{{ __('Show total only') }}</label>
                                    </div>
                                </div>
                            </div>

                            {{-- buttons --}}
                            <div class="form-group row">
                                <button onclick="window.print()"
                                    class="btn btn-default w-100">{{ __('Print') }}</button>
                            </div>
                            <div class="form-group row">
                                <button onclick="saveLink()" class="btn btn-default w-100">{{ __('Copy link') }}</button>
                            </div>
                            <div class="form-group row">
                                <button onclick="openWhatsappModal()"
                                    class="btn btn-default w-100">{{ __('Send by whatsapp') }}</button>
                            </div>
                            <div class="form-group row">
                                <button onclick="openMailModal()"
                                    class="btn btn-default w-100">{{ __('Send by mail') }}</button>
                            </div>
                            <div class="form-group row">
                                <button onclick="loadContent(' {{ route('quotes.edit', $quote->id) }} ')"
                                    class="btn btn-default w-100">{{ __('Back to editing') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- Mail Modal -->
    <div class="modal fade modal-class" id="mailModal" tabindex="-1" role="dialog" aria-labelledby="mailModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mailModalLabel">{{ __('Send by mail') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="quote-mail-form" method="post" action="{{ route('quotes.mail') }}">
                        <input type="hidden" id="mail_id" name="mail_id" value="{{ $quote->id }}" />
                        <input type="hidden" id="mail_hashid" name="mail_hashid" value="{{ $hashid }}" />
                        <div class="form-group row">
                            <label for="mail_from" class="col-md-2 col-form-label">{{ __('From') }}</label>
                            <div class="col-md-10">
                                <input class="form-control mail-from" id="mail_from" name="mail_from">
                                <span id="mail_from-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="mail_to" class="col-md-2 col-form-label">{{ __('To') }}</label>
                            <div class="col-md-10">
                                <input class="form-control mail-to" id="mail_to" name="mail_to">
                                <span id="mail_to-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="mail_subject" class="col-md-2 col-form-label">{{ __('Subject') }}</label>
                            <div class="col-md-10">
                                <input class="form-control mail-subject" id="mail_subject" name="mail_subject">
                                <span id="mail_subject-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="mail_body" class="col-md-2 col-form-label">{{ __('Message') }}</label>
                            <div class="col-md-10">
                                <textarea class="form-control mail-body" id="mail_body" name="mail_body" rows="8"></textarea>
                                <span id="mail_body-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        {{ __('Cancel') }}</button>
                    <button type="button" class="btn btn-info" onclick="sendByMail()">
                        {{ __('Send') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Whatsapp Modal -->
    <div class="modal fade modal-class" id="whatsappModal" tabindex="-1" role="dialog"
        aria-labelledby="whatsappModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="whatsappModalLabel">{{ __('Send by Whatsapp') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <input type="hidden" id="whatsapp_id" name="whatsapp_id" value="{{ $quote->id }}" />
                        <input type="hidden" id="whatsapp_hashid" name="whatsapp_hashid"
                            value="{{ $hashid }}" />
                        <label for="whatsapp_phone" class="col-md-2 col-form-label">{{ __('Phone number') }}</label>
                        <div class="col-md-10">
                            <input class="form-control whatsapp-phone" id="whatsapp_phone" name="whatsapp_phone">
                            <span id="whatsapp_phone-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <div>
                        El mensaje se enviará al número del contacto de la cotización. Si deseas puedes enviarlo a cualquier
                        otro número de celular.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        {{ __('Cancel') }}</button>
                    <button type="button" class="btn btn-info" onclick="sendByWhatsapp({{ $quote->id }})">
                        {{ __('Send') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Image Modal -->
    <div class="modal fade modal-class" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">{{ __('Quote') }} No.
                        {{ $quote->quote_number }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <div class="modal-body text-center">
                            <img id="modalImage" src="" alt="Full Image" class="img-fluid"
                                style="max-height: 80vh;">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        {{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>
    <style>
        html,
        body {
            height: 100%;
            /* Important! */
            margin: 0;
            /* Reset default margins */
        }

        .wrapper {
            height: 100%;
            background-color: #f7f7f7;
        }

        .document {
            height: 100%;
            background-color: #fff;
            padding: 20px;
        }

        .divider {
            border-top: 1px solid #ddd;
            /* Set the border */
            /* margin: 0.5rem 0; */
            /* Add top and bottom margin */
        }

        .totals-table {
            /* border-bottom: 1px solid #dee2e6; */
        }

        .totals-table th,
        .totals-table td {
            border-top: 0;
            padding-top: 0.4rem;
            padding-bottom: 0.4rem;
        }

        .totals-table td {
            text-align: right;
        }

        .signature {
            margin-top: 3rem;
            margin-bottom: 1rem;
        }

        .footer {
            margin-bottom: 4rem;
        }

        .input-nooutline {
            background: transparent;
            border: none;
            outline: none;
            width: 100%;
            padding: 0;
            margin: 0;
            font: inherit;
            color: inherit;
            text-align: right;
            appearance: none;
        }

        @media print {
            .print-only {
                display: block;
            }
        }
    </style>

    <script>
        var sender_name = '{{ auth()->user()->name }}';
        var client_name = '{{ $quote->client->name }}';
        var contact_name = '{{ $quote->contact->name }}';
        var contact_email = '{{ $quote->contact->email }}';
        var contact_phone = '{{ $quote->contact->phone }}';
        contact_phone = contact_phone.replace(/[-() ]/g, '')

        var quote_title = '{{ $quote->title }}';
        var quote_number = '{{ $quote->quote_number }}';

        $("#showTotalOnly").on("click", function() {
            toggleShowTotalOnly();
        });

        function toggleShowTotalOnly() {

            const showTotalOnly = $("#showTotalOnly").is(":checked") ? 1 : 0;

            $.ajax({
                    url: '{{ route('quotes.show-total-only') }}',
                    type: 'POST',
                    data: {
                        id: '{{ $quote->id }}',
                        show_total_only: showTotalOnly,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (showTotalOnly) {
                            $('.col-price').hide();
                        } else {
                            $('.col-price').show();
                        }
                    },
                    error: function(xhr) {
                        alert('{{ __('Failed to update quote.') }}');
                    }
                })
                .fail(function(xhr) {
                    if (xhr.status === 401 || xhr.status === 419) {
                        window.location.href = "/login";
                    } else {
                        console.error(`Error: ${xhr.status} - ${xhr.statusText}`);
                        alert('{{ __('Failed to update quote.') }}');
                    }
                });

        }

        function saveLink() {
            const hashid = "{{ $hashid }}";
            const url = `${baseUrl}/quote/${hashid}`;

            navigator.clipboard.writeText(url)
                .then(() => alert("{{ __('Link copied to clipboard!') }}"))
                .catch(err => alert("{{ __('Failed to copy the link.') }}"));
        }

        function openMailModal() {
            var subject = client_name + ' te ha enviado la cotización No: ' + quote_number + '; ' + quote_title + '.';
            var message = 'Apreciable ' + contact_name + '\n\nA continuación te enviamos la cotización solicitada.';

            $('.invalid-feedback').text('').css('display', 'none');
            $('#mail_from').val(sender_name);
            $('#mail_to').val(contact_email);
            $('#mail_subject').val(subject);
            $('#mail_body').val(message);
            $('#mailModal').modal('show');
        }

        function openWhatsappModal() {
            $('.invalid-feedback').text('').css('display', 'none');
            $('#whatsapp_phone').val(contact_phone);
            $('#whatsappModal').modal('show');
        }

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

            let isValid = true;

            const mail_from = $('#mail_from').val().trim();
            if (!mail_from) {
                isValid = false;
                $('#mail_from-error').text('{{ __('From is required.') }}').css('display',
                    'block');
            }

            const mail_to = $('#mail_to').val().trim();
            if (!mail_to) {
                isValid = false;
                $('#mail_to-error')
                    .text('{{ __('To is required.') }}')
                    .css('display', 'block');
            } else {
                // Split by comma and trim spaces
                const emails = mail_to.split(',').map(e => e.trim()).filter(e => e !== '');

                // Check each email
                let allValid = true;
                emails.forEach(email => {
                    if (!validateEmail(email)) {
                        allValid = false;
                    }
                });

                if (!allValid) {
                    isValid = false;
                    $('#mail_to-error')
                        .text('{{ __('Invalid format for To field.') }}')
                        .css('display', 'block');
                }
            }

            const mail_subject = $('#mail_subject').val().trim();
            if (!mail_subject) {
                isValid = false;
                $('#mail_subject-error').text('{{ __('Subject is required.') }}').css('display',
                    'block');
            }

            if (isValid) {
                $('#mailModal').modal('hide');
                $(".overlay").show();
                $('#quote-mail-form').submit();
            }
        }

        function sendByWhatsapp(id) {
            $('.invalid-feedback').text('').css('display', 'none');

            let isValid = true;

            let whatsapp_phone = $('#whatsapp_phone').val().trim();
            if (!whatsapp_phone) {
                isValid = false;
                $('#whatsapp_phone-error').text('{{ __('Phone is required.') }}').css('display',
                    'block');
            }

            if (isValid) {

                whatsapp_phone = whatsapp_phone.replace(/[-() ]/g, '');

                const encodedMessage = "{{ urlencode(route('view-quote', $hashid)) }}";
                const whatsappUrl = "https://wa.me/" + whatsapp_phone + "?text=" + encodedMessage;

                $('#whatsappModal').modal('hide');

                updateQuoteStatus(id, null, 'Enviada');

                window.open(whatsappUrl, '_blank');
            }
        }

        function openImageModal(imageFilename) {
            const imageUrl = `/storage/images/${imageFilename}`;
            document.getElementById('modalImage').src = imageUrl;

            $('#imageModal').modal('show');
        }
    </script>
@endsection