@extends('pages.layout')
@section('title', 'Vendors')

@section('content')
<style>
    .addvendors {
        display: flex;
        align-items: center;
        justify-content: space-between
    }
</style>
<div class="page-container">
    <div class="main-content">
        @include('pages.includes.messages')
        <div class="card">
            <div class="card-body">
                <div class="addvendors">

                    <h4>Vendors List ({{ $vendorCount }})</h4>
                    <a href="{{ route('admin.vendors.store') }}" class="btn btn-primary">
                        <i class="anticon anticon-plus-circle m-r-5"></i>
                        <span>Add Vendor</span>
                    </a>

                </div>
                <div class="addvendors" style="margin-top: 20px;">
                    <div class="row col-lg-12 col-sm-12">
                        <div class="col-md-4">
                            <select class="custom-select area_name " name="area_name" id="area_name">
                                <option value="">Select Area</option>

                                @foreach($areas as $area)
                                <option value="{{$area->id}}">{{$area->area_name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <select class="custom-select" name="select_vender" id="select_vender">
                                <option value="">Select Vender</option>

                            </select>
                        </div>
                        <!-- <div class="col-md-4">
                            <select class="custom-select" name="select_categories">
                                <option value="">Select Categories</option>
                                @foreach($subCategorys as $subCategory)
                                <option value="{{$subCategory->id}}">{{$subCategory->name}}</option>
                                @endforeach

                            </select>
                        </div> -->
                    </div>

                </div>
                <div class="m-t-25">
                    <table id="datatable" class="table" data-page-length="10">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Owner Name</th>
                                <th>Shop Name</th>
                                <th>Phone No & Aternative</th>
                                <th>Have Vehicle</th>
                               
                                <th>Area</th>
                              
                                <th>Minimum Pickup</th>
                                <th>Image</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                    </table>
                    </tbody>
                    <div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@section('js')
<script>
    $('#area_name').on('change', function() {
        var idArea = this.value;
        $("#select_vender").html('');
        $.ajax({
            url: "{{ route('admin.vendors.search.area') }}",

            type: "POST",
            data: {
                idArea: idArea,
                _token: '{{csrf_token()}}'
            },
            dataType: 'json',
            success: function(result) {
                $('#select_vender').html('<option value="">Select Vender</option>');
                $.each(result.vendor, function(key, value) {
                    $("#select_vender").append('<option value="' + value
                        .id + '">' + value.owner_name + '</option>');
                });

            }
        });
    })
    $(document).ready(function() {
        var table = $('#datatable').DataTable({
            "processing": true,
            "serverSide": true,
            "scrollX": true,
            responsive: true,
            pageLength: 25,
            'order': [
                [0, 'desc']
            ],
            language: {
                search: "",
                searchPlaceholder: "Search Here",
            },
            "ajax": {
                "url": "{{ route('admin.vendors.search') }}",
                "type": "POST",
                "headers": {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                "data": function(d) {

                    d.area_id = $('#area_name').val(),
                        d.vender_id = $('#select_vender').val()
                }
            },
            columns: [{
                    data: null,
                    orderable: false
                },
                {
                    data: 'owner_name'
                },
                {
                    data: 'shop_name'
                },
                {
                    data: null,
                    render: function(data, type, row) {
                        return `
                            <div class="d-flex align-items-center">
                                <div class="d-flex align-items-center">
                                    <h6 class="m-l-10 m-b-0">${row.phone_no}</br>
                                        <i>${row.atlernative_no}</i>
                                    </h6>
                                </div>
                            </div>
                        `;
                    },
                    orderable: false
                },
                {
                    data: 'have_vehicle',
                    render: function(data) {
                        return data == 1 ? 'Yes' : 'No';
                    }
                },
                
                {
                    data: 'area',
                    render: function(data, type, row) {
                        return data ? data.area_name : '-';
                    },
                    orderable: false
                },
                
                
                
                {
                    data: 'minimum_pickup'
                },
                {
                    data: 'image',
                    render: function(data, type, row) {
                        if (data !== null) {
                            return `
                            <div class="avatar avatar-image">
                                <img class="img-fluid rounded-circle"
                                    src="{{ asset('vendor_images/' . '${data}') }}"
                                    style="max-width: 60px; max-height: auto;" alt="">
                            </div>`;
                        } else {
                            return `
                            <div class="avatar avatar-image">
                                <img class="img-fluid rounded-circle"
                                    src="{{ asset('assets/images/logo/icon.png') }}"
                                    style="max-width: 60px; max-height: auto;" alt="">
                            </div>`;
                        }
                    },
                    orderable: false
                },
                {
                    data: 'id',
                    render: function(data, type, row) {
                        const editUrl =
                            '{{ route("admin.vendors.edit", ["vendor" => "__id__"]) }}'
                            .replace("__id__", data);
                        const deleteUrl =
                            '{{ route("admin.vendors.destroy", ["vendor" => "__id__"]) }}'
                            .replace('__id__', data);
                        const addDailyPrice =
                            '{{ route("admin.vendors.add.daily.price", ["vendor" => "__id__"]) }}'
                            .replace('__id__', data);
                        const viewDailyPriceHistory =
                            '{{ route("admin.vendors.view.daily.price.history", ["vendor" => "__id__"]) }}'
                            .replace('__id__', data);
                        return `<div style="display: flex; align-items: center">
                        <a href="${viewDailyPriceHistory}" class="btn btn-sm btn-primary btn-icon" title="View Daily Price History" style="margin-right: 5px"><i class="anticon anticon-eye"></i></a>

                        <a href="${addDailyPrice}" class="btn btn-sm btn-success btn-icon" title="Add Daily Price" style="margin-right: 5px"><i class="anticon anticon-plus"></i></a>
                    <a href="${editUrl}" class="btn btn-sm btn-warning btn-icon" title="Edit" style="margin-right: 5px"><i class="anticon anticon-edit"></i></a>

                    <button onclick="sweetAlertAjax('DELETE', '${deleteUrl}', 'Are you sure you want to Delete?')" class="btn btn-sm btn-danger btn-icon" title="Delete" style="margin-right: 5px";><i class="anticon anticon-delete"></i></button>
                    </div>
                `;
                    },
                    orderable: false
                }
            ],
            createdRow: function(row, data, dataIndex) {
                $('td:eq(0)', row).html(dataIndex + 1);
            }
        });
        $('#area_name').change(function() {
            table.draw();
        });
        $('#select_vender').change(function() {
            table.draw();
        });
    });
</script>
@endsection