@extends('layouts.marketing_template')
@section('content')
    <div class="container-fluid px-3 px-xxl-5 pt-5">
        <div class="titel-head pb-2 d-flex justify-content-between align-items-center">
            <h1 class="ms-4 mb-0">Lead Status</h1>
            <div class="me-4">
                <button class="btn btn-primary btn-xs font-15 " data-bs-toggle="modal" data-bs-target="#addleadstatus"><i
                        class="fa fa-plus me-2" style="font-size:16px;"></i>Add</button>
                <div class="modal fade" id="addleadstatus" tabindex="-1" aria-labelledby="addleadstatusLabel"
                    aria-hidden="true">
                    @include('sales.leads.components.addleadstatus')
                </div>
            </div>
        </div>
        <div class="flash-message">
            @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                @if (Session::has('alert-' . $msg))
                    <div class="alert alert-{{ $msg }} alert-dismissible fade show" role="alert">
                        <strong>{{ ucfirst($msg == 'danger' ? 'Error' : $msg) }}!</strong>
                        {{ Session::get('alert-' . $msg) }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
            @endforeach
        </div>
        <div class="row g-3">
            <div class="col-lg-12 mt-3 mt-lg-5">
                <div class="bg-dark pb-4 rounded-3 box-shadow">
                    <div class="table-responsive-lg table-p15">
                        <table id="leadstatus_datatable"
                            class="table table-dark table-striped mb-0 text-center table-hover">
                            <thead>
                                <tr>
                                    <th>Sr. No.</th>
                                    <th>Name</th>
                                    <th>Orders</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editleadstatus" tabindex="-1" aria-labelledby="editleadstatusLabel" aria-hidden="true">
        <div class="modal-dialog ">
            <div class="modal-content bg-dark pb-4 rounded-3 box-shadow ">
                <div class="modal-header bg-primary">
                    <h1 class="modal-title fs-5" id="editleadstatusLabel">Edit Lead Status</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="" id="leadstatusform" method="POST">
                    @csrf
                    <div class="modal-body text-start">
                        <div class="mb-3">
                            <label for="name_leadstatus" class="form-label">Name<span class="text-danger">*</span></label>
                            <input type="text" class="form-control form-control-lg" id="name_leadstatus" name="name"
                                value="" placeholder="Name">
                            @error('name')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label for="orders_leadstatus" class="form-label">Orders<span
                                    class="text-danger">*</span></label>
                            <input type="number" class="form-control form-control-lg" id="orders_leadstatus" name="orders"
                                value="" placeholder="Orders">
                            @error('orders')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success btn-sm">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function() {
            let table = $('#leadstatus_datatable').DataTable({
                "autoWidth": false,
                "responsive": true,
                "order": [
                    [0, "desc"]
                ],
                "processing": true,
                "serverSide": true,
                "language": {
                    processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '
                },
                "ajax": "{{ route('marketing.sales.leads.leadstatuslist') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'orders',
                        name: 'orders'
                    },
                    {
                        data: 'action',
                        name: 'action'
                    },
                ],
                dom: 'lBfrtip',
                buttons: [],
                "lengthMenu": [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, 'All']
                ]
            })
        })
    </script>
    <script>
        function editLeadStatus(id) {
            let url = "{{ url('/marketing/sales/leads/leadstatus') }}/" + id;
            $.ajax({
                url,
                type: "GET",
                success: function(response) {
                    let result = response.result;
                    $("#name_leadstatus").val(result.name);
                    $("#orders_leadstatus").val(result.orders);
                    $("#leadstatusform").attr("action", "/marketing/sales/leads/leadstatusupdate/" + id);
                },
                error: function(error) {
                    console.log(error);
                }
            })
        }

        function deleteLeadStatus(id) {
            let url = "{{ url('/marketing/sales/leads/leadstatus') }}/" + id;
            let name = "";
            $.ajax({
                url,
                type: "GET",
                success: function(response) {
                    let result = response.result;
                    name = result.name;
                    let ans = confirm(`Are you sure, you want to delete "${name}"?`);
                    if (ans) {
                        let url = "{{ '/marketing/sales/leads/leadstatusdelete' }}/" + id;
                        $.ajax({
                            url,
                            type: "GET",
                            success: function(response) {
                                location.reload();
                            },
                            error: function(error) {
                                console.log(error);
                            }
                        });
                    }
                },
                error: function(error) {
                    console.log(error);
                }
            })
        }
    </script>
@endsection