@extends('template.app')

@section('meta')
@endsection

@section('title')
    Invoice Documents
@endsection

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <style>
        .btn-outline-primary:hover {
            color: inherit !important;
            background-color: transparent !important;
            border-color: #ff4d4d !important;
        }

        .pdf-card{
            height: 320px;
            border-radius: 12px;
        }

        .button-divider{
            border-top: 1px dashed #d3d3d3;
            margin-top: 12px;
            padding-top: 12px;
        }
    </style>
@endsection

@section('content')

    <div class="page-breadcrumb">
        <div class="row">
            <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Document Dashboard</h4>
            <div class="col-7 align-self-center">
                <div class="d-flex align-items-center">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb m-0 p-0">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('documents') }}" class="text-muted">Documents</a></li>
                            <li class="breadcrumb-item text-muted active" aria-current="page">Invoice Document</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <div class="col-sm-8"></div>
        </div>
    </div>

    <div class="container-fluid">

        <div class="row mb-4">
            <div class="col-md-4">
                <input type="text" id="searchPdf" class="form-control" placeholder="Search PDF File Name...">
            </div>
        </div>

        <div class="row" id="pdfContainer">
            @if(!empty($pdfFiles) && count($pdfFiles) > 0)

                @foreach($pdfFiles as $file)
                     @php
                        $fileWithoutExt = pathinfo($file, PATHINFO_FILENAME);
                        $parts = explode('_', $fileWithoutExt);
                        $customerName = $parts[0] ?? '';
                        $invoiceNo = $parts[1] ?? '';
                        $invoiceDate = $parts[2] ?? '';

                    @endphp

                    <div class="pdf-item mb-4" data-name="{{ strtolower($customerName) }}" style="width:20%; padding:10px;">
                        <div class="card shadow-sm pdf-card">
                            <div class="card-body text-center">
                                <a href="{{ asset('uploads/invoices/'.$file) }}" target="_blank">
                                    <img src="https://cdn-icons-png.flaticon.com/512/337/337946.png" width="70" class="mb-3">
                                </a>

                                <p class="mb-1 text-dark text-start">
                                    <strong> {{ $customerName }} </strong>
                                </p>

                                <p class="mb-1 text-dark text-start">
                                    <strong>Invoice No :</strong> {{ $invoiceNo }}
                                </p>

                                <p class="mb-3 text-dark text-start">
                                    <strong>Invoice Date :</strong> {{ $invoiceDate }}
                                </p>

                                <div class="button-divider">
                                    <div class="d-flex justify-content-between">

                                        <a href="{{ asset('uploads/invoices/'.$file) }}" download 
                                            class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" style="border-color:#28a745;">

                                            <i class="bi bi-download" style="color:#28a745 !important;"></i>

                                        </a>

                                        <a href="{{ route('invoice.delete', $file) }}"
                                           class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right delete-btn" style="border-color:#ff4d4d;">

                                            <i class="bi bi-trash" style="color:#ff4d4d !important;"></i>

                                        </a>

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

                        </div>

                    </div>

                @endforeach

            @else

                <div class="col-12">
                    <div class="alert alert-danger">
                        No PDF Files Found
                    </div>
                </div>

            @endif
        </div>
    </div>

@endsection

@section('scripts')
    <script>

        $(document).ready(function () {

            // Search
            $('#searchPdf').on('keyup', function () {

                let value = $(this).val().toLowerCase();

                $('.pdf-item').filter(function () {

                    $(this).toggle(
                        $(this).attr('data-name').indexOf(value) > -1
                    );

                });

            });

            // Triple Delete Confirmation
            $('.delete-btn').click(function(e){

                e.preventDefault();

                let url = $(this).attr('href');

                if(confirm('Are you sure you want to delete this PDF ?')){

                    if(confirm('This action cannot be undone. Continue ?')){

                        if(confirm('Final Warning! Delete permanently ?')){

                            window.location.href = url;

                        }

                    }

                }

            });

        });

        </script>
@endsection