@extends('layouts.app', ['page' => 'estimates'])

@section('title', __('messages.estimate_details'))

@section('page_header')
<div class="orders-page">
    <div class="page__heading d-flex align-items-center justify-content-between flex-wrap">
        <div class="flex">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item">
                        <a href="#"><i class="material-icons icon-20pt">home</i></a>
                    </li>
                    <li class="breadcrumb-item" aria-current="page">
                        <a href="{{ route('estimates') }}">{{ __('messages.estimates') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        {{ __('messages.estimate_details') }}
                    </li>
                </ol>
            </nav>
            <h1 class="m-0 page-title">{{ __('messages.estimate_details') }}</h1>
        </div>

      @if(($estimate->estatus) === "COTIZADO" && ($estimate->customer->email))
<div class="yappy-inline">        <div class="yappy-header-actions">
            <img alt="Yappy"
                 src="https://dashboard.boxshoplogistics.com/brand.png"
                 class="yappy-header-logo" />

            <input type="text"
                   id="copyTarget"
                   class="form-control yappy-header-input"
                   value="https://dashboard.boxshoplogistics.com/pagos/cot/{{ $estimate->uid }}"
                   readonly>


<button class="btn btn-outline-primary btn-sm" id="copyButton">
   Copiar
</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const copyButton = document.getElementById('copyButton');
            const copyTarget = document.getElementById('copyTarget');

            if (copyButton && copyTarget) {
                copyButton.addEventListener('click', function () {
                    copyTarget.select();
                    copyTarget.setSelectionRange(0, 99999);
                    document.execCommand('copy');

                    copyButton.textContent = 'Copiado';
                    setTimeout(function () {
                        copyButton.textContent = 'Copiar';
                    }, 1800);
                });
            }
        });
    </script>
@endif
    </div>
</div>
@endsection

@section('content')
<div class="orders-page">

    @if($estimate->idyappy && ($estimate->estatus) === "PAGO WEB")
        <script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
        <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js' integrity='sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy' crossorigin='anonymous'></script>

        <div class='text-center'>
            <a href='#myModal' class='trigger-btn' data-toggle='modal'></a>
        </div>

        <div id='myModal' class='modal fade'>
            <div class='modal-dialog modal-login'>
                <div class='modal-content'>
                    <div class='modal-header'>
                        <h4 class='modal-title'>PAGO PENDIENTE POR APLICAR</h4>
                        <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
                    </div>
                    <div class='modal-body'>
                        <p style='text-align: center;'>HAY UN PAGO PENDIENTE POR INGRESAR.</p>
                        <p style='text-align: center;'>CONFIRMACION YAPPY WEB: {{ $estimate->idyappy }}</p>
                        <p style='text-align: center;'>VERIFICAR POR FAVOR</p>
                    </div>
                    <div class='modal-footer'>
                        <a href='https://dashboard.boxshoplogistics.com/api/yappy/cot/view.php?confirmacion={{ $estimate->idyappy }}' target='_blank'>Verificar Aquí</a>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $('#myModal').modal('toggle');
        </script>
    @endif

    <div class="card mb-4">
        <div class="card-body">
            <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start">
                <div class="mb-3 mb-lg-0">
                    <h2 class="mb-1">#COT-{{ $estimate->id }}</h2>
                    <div class="text-muted">{{ $estimate->customer->display_name ?? '' }}</div>
                </div>

                <div class="d-flex flex-wrap">
                    <a href="{{ route('pdf.estimate', ['estimate' => $estimate->uid, 'download' => true]) }}"
                       target="_blank"
                       class="btn btn-light mr-2 mb-2">
                        <i class="material-icons">cloud_download</i>
                        {{ __('messages.download') }}
                    </a>

                    @if(($estimate->estatus) !== "CONVERTIDO")
                        <a href="https://dashboard.boxshoplogistics.com/api/estimado.php?orden={{ $estimate->id }}"
                           class="btn btn-light mr-2 mb-2 alert-confirm"
                           data-alert-title="{{ __('messages.are_you_sure') }}"
                           data-alert-text="{{ __('messages.send_email_warning') }}">
                            <i class="material-icons">send</i>
                            {{ __('messages.send_email') }}
                        </a>

                        <a href="{{ route('estimates.convert', ['estimate' => $estimate->id, 'company_uid' => $currentCompany->uid]) }}"
                           class="btn btn-light mr-2 mb-2 alert-confirm"
                           data-alert-title="{{ __('messages.are_you_sure') }}"
                           data-alert-text="{{ __('messages.convert_estimate_warning') }}">
                            <i class="material-icons">transform</i>
                            {{ __('messages.convert_to_invoice') }}
                        </a>

                        <a href="{{ route('estimates.edit', $estimate->id) }}"
                           class="btn btn-light mr-2 mb-2">
                            <i class="material-icons">edit</i>
                            {{ __('messages.edit') }}
                        </a>
                    @endif

                    <div class="btn-group mb-2">
                        <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            {{ __('messages.more') }}
                        </button>

                        <div class="dropdown-menu dropdown-menu-right">
                            @if(($estimate->estatus) !== "CONVERTIDO")
                                <a href="{{ route('estimates.mark', ['estimate' => $estimate->id, 'status' => 'rejected']) }}"
                                   class="dropdown-item">
                                    {{ __('messages.mark_rejected') }}
                                </a>
                            @endif

                            @if($authUser->hasRole(['admin', 'super_admin']))
                                @if(($estimate->estatus) == "COTIZADO")
                                    <a href="https://dashboard.boxshoplogistics.com/api/recordatorio1.php?orden={{ $estimate->id }}"
                                       class="dropdown-item">
                                        RECORDATORIO 1
                                    </a>
                                @endif

                                @if(($estimate->estatus) == "RECORDATORIO #1 ENVIADO")
                                    <a href="https://dashboard.boxshoplogistics.com/api/recordatorio2.php?orden={{ $estimate->id }}"
                                       class="dropdown-item">
                                        RECORDATORIO 2
                                    </a>
                                @endif

                                <div class="dropdown-divider"></div>

                                <a href="{{ route('estimates.delete', $estimate->id) }}"
                                   class="dropdown-item text-danger delete-confirm">
                                    {{ __('messages.delete') }}
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <hr>

            <div class="row">
                @if(($estimate->status) === "DRAFT" && ($estimate->customer->email))
                    <div class="col-12 mb-3">
                        <div class="alert alert-warning mb-0" role="alert">
                            Recuerda enviar el correo de cotización.
                        </div>
                    </div>
                @endif

                @if($estimate->status == 'DRAFT')
                    <div class="col-12 col-md-6 mb-3">
                        <div class="alert alert-soft-dark d-flex align-items-center mb-0" role="alert">
                            <i class="material-icons mr-3">access_time</i>
                            <div class="text-body"><strong>Estatus:</strong> {{ $estimate->estatus }}</div>
                        </div>
                    </div>
                @elseif($estimate->status == 'ACCEPTED')
                    <div class="col-12 col-md-6 mb-3">
                        <div class="alert alert-soft-success d-flex align-items-center mb-0" role="alert">
                            <i class="material-icons mr-3">done</i>
                            <div class="text-body"><strong>Estatus:</strong> {{ $estimate->estatus }}</div>
                        </div>
                    </div>
                @elseif($estimate->status == 'SENT')
                    <div class="col-12 col-md-6 mb-3">
                        <div class="alert alert-soft-dark d-flex align-items-center mb-0" role="alert">
                            <i class="material-icons mr-3">access_time</i>
                            <div class="text-body"><strong>Estatus:</strong> {{ $estimate->estatus }}</div>
                        </div>
                    </div>
                @elseif($estimate->status == 'REJECTED')
                    <div class="col-12 col-md-6 mb-3">
                        <div class="alert alert-soft-danger d-flex align-items-center mb-0" role="alert">
                            <i class="material-icons mr-3">cancel</i>
                            <div class="text-body"><strong>Estatus:</strong> {{ $estimate->estatus }}</div>
                        </div>
                    </div>
                @elseif($estimate->status == 'PRIMER RECORDATORIO')
                    <div class="col-12 col-md-6 mb-3">
                        <div class="alert alert-soft-warning d-flex align-items-center mb-0" role="alert">
                            <i class="material-icons mr-3">schedule</i>
                            <div class="text-body"><strong>Estatus:</strong> {{ $estimate->status }} {{ $estimate->record_uno }}</div>
                        </div>
                    </div>
                @elseif($estimate->status == 'SEGUNDO RECORDATORIO')
                    <div class="col-12 col-md-6 mb-3">
                        <div class="alert alert-soft-danger d-flex align-items-center mb-0" role="alert">
                            <i class="material-icons mr-3">schedule</i>
                            <div class="text-body"><strong>Estatus:</strong> {{ $estimate->status }} {{ $estimate->record_dos }}</div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <h4 class="mb-3">Servicios</h4>

            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Servicio</th>
                            <th class="text-center">Cantidad</th>
                            <th class="text-right">Precio</th>
                            @if($estimate->tax_per_item)
                                <th class="text-right">Impuesto</th>
                            @endif
                            @if($estimate->discount_per_item)
                                <th class="text-right">Descuento</th>
                            @endif
                            <th class="text-right">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($estimate->items as $item)
                            <tr>
                                <td>
                                    <div>{{ preg_replace('/\((.*?)\)/i', '', $item->product->name) }}</div>
                                    <small class="text-muted">{!! nl2br(htmlspecialchars($item->product->description)) !!}</small>
                                </td>
                                <td class="text-center">{{ $item->quantity }}</td>
                                <td class="text-right">{!! money($item->price, $estimate->currency_code)->format() !!}</td>

                                @if($estimate->tax_per_item)
                                    <td class="text-right">
                                        @foreach ($item->getTotalPercentageOfTaxesWithNames() as $key => $value)
                                            {{ $key }}<br>
                                        @endforeach
                                    </td>
                                @endif

                                @if($estimate->discount_per_item)
                                    <td class="text-right">{{ $item->discount_val }}%</td>
                                @endif

                                <td class="text-right">{!! money($item->total, $estimate->currency_code)->format() !!}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <hr>

            <div class="row justify-content-end">
                <div class="col-12 col-md-5">
                    <div class="card bg-light border-0">
                        <div class="card-body">
                            @if($estimate->abonominimo)
                                <div class="d-flex justify-content-between mb-2">
                                    <h5 class="mb-0 text-danger">Abono Mínimo</h5>
                                    <h5 class="mb-0 text-danger">${{ $estimate->abonominimo }}</h5>
                                </div>
                            @endif

                            <div class="d-flex justify-content-between">
                                <h5 class="mb-0">Total Estimado</h5>
                                <h5 class="mb-0">{!! money($estimate->total, $estimate->currency_code)->format() !!}</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 col-lg-7 mb-4">
            <div class="card h-100">
                <div class="card-header bg-white">
                    <strong>Documento PDF</strong>
                </div>
                <div class="card-body">
                    <embed class="pdf-iframe"
                           src="{{ route('pdf.estimate', $estimate->uid) }}"
                           type="application/pdf"
                           width="100%"
                           height="700px">
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-5 mb-4">
            <div class="card h-100">
                <div class="card-header bg-white">
                    <strong>Detalles de la Cotización</strong>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <tbody>
                                <tr>
                                    <td><strong>Cliente:</strong></td>
                                    <td>{{ $estimate->customer->display_name ?? '' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Correo:</strong></td>
                                    <td>{{ $estimate->customer->email ?? '' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Estatus:</strong></td>
                                    <td>{{ $estimate->estatus }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Status base:</strong></td>
                                    <td>{{ $estimate->status }}</td>
                                </tr>
                                @if($estimate->record_uno)
                                    <tr>
                                        <td><strong>Recordatorio 1:</strong></td>
                                        <td>{{ $estimate->record_uno }}</td>
                                    </tr>
                                @endif
                                @if($estimate->record_dos)
                                    <tr>
                                        <td><strong>Recordatorio 2:</strong></td>
                                        <td>{{ $estimate->record_dos }}</td>
                                    </tr>
                                @endif
                                @if($estimate->abonominimo)
                                    <tr>
                                        <td><strong>Abono mínimo:</strong></td>
                                        <td>${{ $estimate->abonominimo }}</td>
                                    </tr>
                                @endif
                                <tr>
                                    <td><strong>Total:</strong></td>
                                    <td>{!! money($estimate->total, $estimate->currency_code)->format() !!}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection