@extends('layouts.dashboard')
@section('content')

<style>
    .checkbox-container {
        display: flex;
        flex-wrap: wrap;
    }

    .checkbox-item {
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .city-name {
        padding-left:5px;
    }
</style>
<div class="content-wrapper" style="min-height: 241px;">
    <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
              <h1 class="m-0">{{ $title }}</h1>
            </div>
            <div class="col-sm-6">
              <a href="{{ url('user/vendorlist') }}" type="button" class="btn btn-primary float-right" >All Vendors</a>
            </div>
          </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            @if(Session::has('msg'))
                <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('msg') }}</p>
            @endif
            <div class="row">
                <div class="col-md-6">
                   
                    <input type="hidden" value="{{ $id }}" name="vendor_id" id="vendor_id">
                    <div class="card card-primary card-outline">
                    <div class="card-body box-profile">
                        <div class="text-center">
                        <img class="profile-user-img img-fluid img-circle"
                            src="/assets/images/avtar.png"
                            alt="User profile picture">
                        </div>
                        <h3 class="profile-username text-center" id="username">{{ $vendor->display_name }}</h3>
                        <p class="text-muted text-center"><a href="tel:+91{ $vendor->phone }}" id="phone"><i class="fa fa-phone"></i> {{ $vendor->phone }}</a></p>

                        <ul class="list-group list-group-unbordered mb-3">
                        <li class="list-group-item">
                            <b>Status</b> 
                            <a class="float-right" id="status"></a>
                        </li>
                        <li class="list-group-item">
                            <b>Date Of Registration</b> <a class="float-right" id="date_of_registration"></a>
                        </li>
                        <li class="list-group-item">
                            <b>Alternative Number</b> <a class="float-right" id="alt_number"></a>
                        </li>
                        <li class="list-group-item">
                            <b>Company Name</b> <a class="float-right" id="company_name"></a>
                        </li>
                        <li class="list-group-item">
                            <b>Email Id</b> <a class="float-right" id="email_id"></a>
                        </li>
                        <li class="list-group-item">
                            <b>Last Login</b> <a class="float-right" id="last_login"></a>
                        </li>
                        </ul>
                    </div>
                    <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#editVendorModal">Edit Vendor</button>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">About Events</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                            <tr>
                                <th>Total Events:</th>
                                <td id="total_events"></td>
                            </tr>
                            <tr>
                                <th>Completed Events:</th>
                                <td id="complete_events"></td>
                            </tr>
                            <tr>
                                <th>Ongoing Events:</th>
                                <td id="ongoing_events"></td>
                            </tr>
                            <tr>
                                <th>Loss Events:</th>
                                <td id="loss_events"></td>
                            </tr>
                            </table>
                        </div>
                    </div>
                    </div>
                </div>
            </div>

            <hr>

            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Vendor Services</h3>
                    <button type="button" class="btn btn-warning float-right" data-toggle="modal" data-target="#addServiceModal">Add Service</button>
                </div>

                <div class="card-body table-responsive p-0">
                    <table class="table table-hover text-nowrap">
                    <thead>
                        <tr>
                        <th>ID</th>
                        <!-- <th>Service ID</th> -->
                        <th>Service Name</th>
                        <th>Description</th>
                        <th>Locations</th>
                        <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="vendor_services">
                        
                    </tbody>
                    </table>
                </div>
            </div>

        </div>

        <!-- Add Service Modal -->
        <div class="modal" tabindex="-1" role="dialog" id="addServiceModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form name="addService" method="POST" action="{{ url('/user/add-vendor-service') }}">
                        <div class="modal-header">
                            <input type="hidden" value="{{ $id }}" name="vendor_id" id="vendor_id">
                            <h5 class="modal-title">Add Service</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            {{ csrf_field() }}
                            <div class="mb-3">
                                <label for="service_name" class="form-label">Select Service <span style="color:red;">*</span></label>
                                <select id="selectService" name="service_name" class="form-control">
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="description" class="form-label">Service Description <span style="color:red;">*</span></label>
                                <textarea class="form-control" name="description" id="description" rows="3"></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="selectCities" class="form-label">Select Cities <span style="color:red;">*</span></label>
                                <div id="selectCities" class="checkbox-container"></div>

                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="addService" class="btn btn-primary">Add Service</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- Add Service Modal Closed -->

        <!-- Edit Vendor Details Modal -->
        <div class="modal" tabindex="-1" role="dialog" id="editVendorModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form name="editVendor" id="vendorForm" method="POST" action="{{ url('/user/update-vendor/' . $vendor->id) }}">
                        <div class="modal-header">
                            <input type="hidden" value="{{ $vendor->id }}" name="vendor_id" id="vendor_id">
                            <h5 class="modal-title">Edit Vendor</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            {{ csrf_field() }}
                            <div class="mb-3">
                                <label for="name" class="form-label">Vendor Name</label>
                                <input type="text" class="form-control" id="name" name="name" value="{{ $vendor->display_name }}">
                            </div>
                            <div class="mb-3">
                                <label for="email_id" class="form-label">Email</label>
                                <input type="email" class="form-control" id="email_id" name="email_id" value="{{ $vendor->email_id }}">
                            </div>
                            <div class="mb-3">
                                <label for="alternet_number" class="form-label">Alternative Number</label>
                                <input type="text" class="form-control" id="alternet_number" name="alternet_number" value="{{ $vendor->alternet_number }}">
                            </div>
                            <div class="mb-3">
                                <label for="company_name" class="form-label">Company Name</label>
                                <input type="text" class="form-control" id="company_name" name="company_name" value="{{ $vendor->company_name }}">
                            </div>
                            <div class="mb-3">
                                <label for="display_name" class="form-label">Display Name</label>
                                <input type="text" class="form-control" id="display_name" name="display_name" value="{{ $vendor->display_name }}">
                            </div>
                            <div class="mb-3">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-select form-control" name="status" id="status">
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="editVendor" class="btn btn-primary">Edit Vendor</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- Edit Vendor Details Modal Closed -->

        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
        <script>
            $(document).ready(function () {

                _page = "{{ !empty($_GET['start']) ? $_GET['start'] : 0 }}";
                _length = "{{ !empty($_GET['length']) ? $_GET['length'] : 10 }}";

                $('#addService').on('click', function (e) {
                    e.preventDefault();

                    // Validate the form fields
                    if ($('#selectService').val() === '' || $('#description').val() === '' || $('#selectCities').val() === null) {
                        alert('All fields are required. Please fill in all the details.');
                    } else {
                        // Submit the form if validation passes
                        $('form[name="addService"]').submit();
                    }
                });
            });
        </script>

    </section>
</div>
@endsection