@extends('layout.master')

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

        <!-- Start::page-header -->

        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
            <div>
                <h2 class="main-content-title fs-24 mb-1">Welcome To Dashboard</h2>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                </ol>
            </div>
        </div>
        <div class="row row-sm">
            <div class="col-sm-12 col-lg-12 col-xl-12">
                <!-- Start::row -->


                <div class="row row-sm">
                    <div class="col-sm-12 col-md-6 col-lg-6 col-xl-4">
                        <div class="card custom-card">
                            <div class="card-body">
                                <div class="card-item">
                                    <div class="card-item-icon card-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24"
                                            width="24">
                                            <path d="M0 0h24v24H0V0z" fill="none" />
                                            <path
                                                d="M12 4c-4.41 0-8 3.59-8 8 0 1.82.62 3.49 1.64 4.83 1.43-1.74 4.9-2.33 6.36-2.33s4.93.59 6.36 2.33C19.38 15.49 20 13.82 20 12c0-4.41-3.59-8-8-8zm0 9c-1.94 0-3.5-1.56-3.5-3.5S10.06 6 12 6s3.5 1.56 3.5 3.5S13.94 13 12 13z"
                                                opacity=".3" />
                                            <path
                                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM7.07 18.28c.43-.9 3.05-1.78 4.93-1.78s4.51.88 4.93 1.78C15.57 19.36 13.86 20 12 20s-3.57-.64-4.93-1.72zm11.29-1.45c-1.43-1.74-4.9-2.33-6.36-2.33s-4.93.59-6.36 2.33C4.62 15.49 4 13.82 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8c0 1.82-.62 3.49-1.64 4.83zM12 6c-1.94 0-3.5 1.56-3.5 3.5S10.06 13 12 13s3.5-1.56 3.5-3.5S13.94 6 12 6zm0 5c-.83 0-1.5-.67-1.5-1.5S11.17 8 12 8s1.5.67 1.5 1.5S12.83 11 12 11z" />
                                        </svg>
                                    </div>
                                    <div class="card-item-title mb-2">
                                        <label class="main-content-label fs-13 fw-bold mb-1">Last Lead</label>
                                        <span class="d-block fs-12 mb-0 text-muted">Lead name & amount</span>
                                    </div>
                                    <div class="card-item-body">
                                        <div class="card-item-stat">
                                            <h4 class="fw-bold">{{ $lastDepositlead->lead->fullname ?? null }} --
                                                ${{ number_format($lastDepositlead->deposit ?? 0, 2) }}</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6 col-xl-4">
                        <div class="card custom-card">
                            <div class="card-body">
                                <div class="card-item">
                                    <div class="card-item-icon card-icon">
                                        <svg class="text-primary" xmlns="http://www.w3.org/2000/svg" height="24"
                                            viewBox="0 0 24 24" width="24">
                                            <path d="M0 0h24v24H0V0z" fill="none" />
                                            <path
                                                d="M12 4c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8zm1.23 13.33V19H10.9v-1.69c-1.5-.31-2.77-1.28-2.86-2.97h1.71c.09.92.72 1.64 2.32 1.64 1.71 0 2.1-.86 2.1-1.39 0-.73-.39-1.41-2.34-1.87-2.17-.53-3.66-1.42-3.66-3.21 0-1.51 1.22-2.48 2.72-2.81V5h2.34v1.71c1.63.39 2.44 1.63 2.49 2.97h-1.71c-.04-.97-.56-1.64-1.94-1.64-1.31 0-2.1.59-2.1 1.43 0 .73.57 1.22 2.34 1.67 1.77.46 3.66 1.22 3.66 3.42-.01 1.6-1.21 2.48-2.74 2.77z"
                                                opacity=".3" />
                                            <path
                                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.31-8.86c-1.77-.45-2.34-.94-2.34-1.67 0-.84.79-1.43 2.1-1.43 1.38 0 1.9.66 1.94 1.64h1.71c-.05-1.34-.87-2.57-2.49-2.97V5H10.9v1.69c-1.51.32-2.72 1.3-2.72 2.81 0 1.79 1.49 2.69 3.66 3.21 1.95.46 2.34 1.15 2.34 1.87 0 .53-.39 1.39-2.1 1.39-1.6 0-2.23-.72-2.32-1.64H8.04c.1 1.7 1.36 2.66 2.86 2.97V19h2.34v-1.67c1.52-.29 2.72-1.16 2.73-2.77-.01-2.2-1.9-2.96-3.66-3.42z" />
                                        </svg>
                                    </div>
                                    <div class="card-item-title mb-2">
                                        <label class="main-content-label fs-13 fw-bold mb-1">Total
                                            Deposit</label>
                                        <span class="d-block fs-12 mb-0 text-muted">Last month till date</span>
                                    </div>
                                    <div class="card-item-body">
                                        <div class="card-item-stat">
                                            <h4 class="fw-bold">${{ number_format($totalDeposit, 2) }}</h4>
                                            <!-- <small><b class="text-success">55%</b> higher</small> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-4">
                        <div class="card custom-card">
                            <div class="card-body">
                                <div class="card-item">
                                    <div class="card-item-icon card-icon">
                                        <svg class="text-primary" xmlns="http://www.w3.org/2000/svg"
                                            enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24"
                                            width="24">
                                            <g>
                                                <rect height="14" opacity=".3" width="14" x="5" y="5" />
                                                <g>
                                                    <rect fill="none" height="24" width="24" />
                                                    <g>
                                                        <path
                                                            d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,19H5V5h14V19z" />
                                                        <rect height="5" width="2" x="7" y="12" />
                                                        <rect height="10" width="2" x="15" y="7" />
                                                        <rect height="3" width="2" x="11" y="14" />
                                                        <rect height="2" width="2" x="11" y="10" />
                                                    </g>
                                                </g>
                                            </g>
                                        </svg>
                                    </div>
                                    <div class="card-item-title  mb-2">
                                        <label class="main-content-label fs-13 fw-bold mb-1">Total Leads</label>
                                        <span class="d-block fs-12 mb-0 text-muted">Till Date {{ date('Y-m-d') }}</span>
                                    </div>
                                    <div class="card-item-body">
                                        <div class="card-item-stat">
                                            <h4 class="fw-bold">{{ $totalleads }}</h4>
                                            <!-- <small><b class="text-danger">12%</b> decrease</small> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End::row -->

                <!-- Start::row -->
                <div class="row row-sm">
                    @can('csv upload')
                        <div class="col-md-12 col-lg-12 col-xl-12">
                            <div class="card custom-card transcation-crypto">
                                <div class="card-header border-bottom-0">
                                    <div>
                                        <div class="card-title">Leads</div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table id="lead-datatable" class="table table-bordered text-nowrap" style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th>Lead Id</th>
                                                    <th>Lead Name</th>
                                                    <th>Agents Name</th>
                                                    <th>Total Deposit</th>
                                                    <th>Country</th>
                                                    <th>Date</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($leads as $key => $lead)
                                                    <tr>

                                                        <td><a href="{{ route('lead.show', $lead->id) }}"><span
                                                                    class="text-dark">{{ $key + 1 }}</span></a></td>
                                                        <td><a href="{{ route('lead.show', $lead->id) }}"><span
                                                                    class="text-dark">{{ $lead->fullname }}</span></a>
                                                        </td>

                                                        <td>
                                                            <input type="hidden" name="_token" id="csrf_token"
                                                                value="{{ csrf_token() }}">
                                                            @foreach ($lead->agents as $agent)
                                                                <span class="tag tag-default mt-1 mb-1">
                                                                    {{ $agent->agents->name ?? 'User Delete' }}
                                                                    <a href="javascript:void(0);"
                                                                        data-leadid="{{ $lead->id }}"
                                                                        data-agentid="{{ $agent->agent_id }}"
                                                                        onclick="removeAgent(this)" class="tag-addon">
                                                                        <i class="fe fe-x"></i>
                                                                    </a>
                                                                </span>
                                                            @endforeach
                                                        </td>
                                                        </td>
                                                        <td>${{ number_format($lead->deposit_sum_deposit ?? 0, 2) }}</td>
                                                        <td>{{ $lead->county }}</td>
                                                        <td>{{ $lead->depositdate }}</td>

                                                        <td>
                                                            @can('lead edit')
                                                                <a href="{{ route('lead.edit', $lead->id) }}"
                                                                    class="btn btn-warning btn-sm"><i
                                                                        class="bi bi-pencil"></i></a>
                                                            @endcan()
                                                            @can('lead delete')
                                                                <form id="delete-form-{{ $lead->id }}"
                                                                    action="{{ route('lead.destroy', $lead->id) }}"
                                                                    method="POST" style="display: none;">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                </form>

                                                                <button class="btn btn-danger btn-sm"
                                                                    onclick="confirmDelete({{ $lead->id }})">
                                                                    <i class="bi bi-trash"></i>
                                                                </button>
                                                            @endcan()
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endcan()
                </div>
                <div class="row">
                    @can('csv upload')
                        <div class="col-md-12 col-xl-4">
                            {{-- <h6 class="mb-3">Import Leads:</h6> --}}
                            <div class="row">
                                <div class="col-xl-12">
                                    <div class="card custom-card">
                                        @if (session('success'))
                                            <p class="mb-0 p-2" style="color: green;">asdas{{ session('success') }}</p>
                                        @endif
                                        @if (session('error'))
                                            <p class="mb-0 p-2" style="color: danger;">asdas{{ session('success') }}</p>
                                        @endif
                                        <div class="card-header justify-content-between">
                                            <div class="card-title">
                                                Import Leads:
                                            </div>
                                            <small>Upload (CSV)</small>
                                        </div>


                                        <form action="{{ route('upload.process') }}" method="POST"
                                            enctype="multipart/form-data">
                                            @csrf
                                            <div class="card-body">
                                                <input type="text" class="form-control mb-2" placeholder="Enter File Name"
                                                    required>
                                                <input class="form-control" type="file" name="csv_file" required>
                                                @error('csv_file')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                                <div class="row mt-2">
                                                    <div class="col-md-12 text-end">
                                                        <button class="btn btn-primary" type="submit">Upload &
                                                            Proceed</button>

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

                                    </div>
                                </div>
                                {{-- <div class="col-xl-12">
                                    <div class="card custom-card">
                                        <div class="card-header">
                                            <div class="card-title">
                                                Single Upload
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <input type="file" class="single-fileupload" name="filepond" accept="image/png, image/jpeg, image/gif">
                                        </div>
                                    </div>
                                </div> --}}
                            </div>
                        </div>
                    @endcan()
                </div>
            </div>
        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        function confirmDelete(leadId) {
            Swal.fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#3085d6",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-form-' + leadId).submit();
                }
            });
        }

        function removeAgent(element) {
            let leadId = element.getAttribute("data-leadid");
            let agentId = element.getAttribute("data-agentid");
            var csrf_token = $('#csrf_token').val();

            fetch("{{ route('lead.removeAgent') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": csrf_token,
                    },
                    body: JSON.stringify({
                        lead_id: leadId,
                        agent_id: agentId
                    }),
                })
                .then(response => response.json())
                .then(data => {
                    console.log("Response:", data);
                    if (data.status == 200) {

                        element.parentElement.remove(); // Tag remove kar do
                        alert(data.message)
                    }
                })
                .catch(error => console.error("Error:", error));


            // Yahan AJAX request ya koi aur logic add kar sakta hai
        }
        $(document).ready(function() {
            $('#lead-datatable').DataTable({
                "pageLength": 50,
                "lengthMenu": [
                    [50, 100, 200, 500, 1000],
                    [50, 100, 200, 500, 1000]
                ],
                "scrollY": "350px", // Set table height (adjust as needed)
                "scrollX": "auto", // Set table width (adjust as needed)
                "scrollCollapse": true, // Collapse empty space if rows are less
                "paging": true // Enable pagination
                // "responsive": true,
                // "dom": 'Bfrtip',
                // "buttons": [
                //     'print'
                // ]
            });
        });
    </script>
@endsection