@extends('layout.admin')

@section('head')
    @extends('layout.header')
    @section('header_title', 'Customer')
@endsection

@section('content')
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Customer</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Customer</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <!-- left column -->
                    <div class="col-md-12">
                        <!-- jquery validation -->
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">Customer Details</h3>
                            </div>
                            <!-- /.card-header -->
                            <!-- form start -->
                            <form id="save_customer_form">
                                {{ csrf_field() }}
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">First Name</label>
                                                <input type="text" name="Full_Name" class="form-control" id="Full_Name"
                                                    placeholder="Enter First Name">
                                            </div>

                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">Last Name</label>
                                                <input type="text" name="First_Name" class="form-control" id="First_Name"
                                                    placeholder="Enter Last Name">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">Contact Number</label>
                                                <input type="text" name="Tp" class="form-control" id="Tp"
                                                    placeholder="Enter Contact Number">
                                                <small id="error-message"
                                                    class="form-text error-number-message text-danger">Enter a valid
                                                    number (10 digits required)</small>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">Address</label>
                                                <input type="text" name="Address" class="form-control" id="Address"
                                                    placeholder="Enter Address">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Email Address</label>
                                                    <input type="email" name="Email" class="form-control" id="Email"
                                                        placeholder="Enter Email Address">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">Comment</label>
                                                <input type="text" name="Comment" class="form-control" id="Comment"
                                                    placeholder="Enter Comment">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-check" style="font-size: 20px">
                                                <input value="1" class="form-check-input" type="checkbox"
                                                    value="" id="loyalty" style="width: 18px; aspect-ratio: 1;">
                                                <label style="margin-left: 10px" class="form-check-label" for="loyalty">
                                                    Loyalty Customer
                                                </label>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                                <!-- /.card-body -->
                                <div class="card-footer text-right">
                                    <button type="submit" class="btn btn-primary"
                                        onclick="validateSubmitCustomer(event)">Save Customer</button>
                                </div>
                            </form>
                        </div>
                        <!-- /.card -->
                    </div>

                </div>
                <!-- /.row -->
            </div>
        </section>

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header p-0 pt-1">
                                <ul class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist">
                                    <li class="pt-2 px-3">
                                        <h3 class="card-title">Customers</h3>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link active" id="custom-tabs-two-home-tab" data-toggle="pill"
                                            href="#custom-tabs-active" role="tab"
                                            aria-controls="custom-tabs-two-home" aria-selected="true">Active</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="custom-tabs-two-home-tab" data-toggle="pill"
                                            href="#custom-tabs-loyalty" role="tab"
                                            aria-controls="custom-tabs-two-home" aria-selected="true">Loyalty
                                            Customers</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="custom-tabs-two-profile-tab" data-toggle="pill"
                                            href="#custom-tabs-blocked" role="tab"
                                            aria-controls="custom-tabs-two-profile" aria-selected="false">Blocked</a>
                                    </li>
                                </ul>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <div class="tab-content" id="custom-tabs-two-tabContent">
                                    <div class="tab-pane fade show active" id="custom-tabs-active" role="tabpanel"
                                        aria-labelledby="custom-tabs-two-home-tab">
                                        <table id="example2" class="table table-bordered table-hover">
                                            <thead>
                                                <tr>
                                                    <th>ID</th>
                                                    <th>First Name</th>
                                                    <th>Last Name</th>
                                                    <th>Contact Number</th>
                                                    <th>Address</th>
                                                    <th>Email</th>
                                                    <th>Comment</th>
                                                    <th>Loyalty Points</th>
                                                    <th>Status</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($customers as $item)
                                                    @if ($item->Status == 1)
                                                        <tr>
                                                            <td>{{ $item->idCustomer }}</td>
                                                            <td>{{ $item->Full_Name }}</td>
                                                            <td>{{ $item->First_Name }}</td>
                                                            <td>{{ $item->Contact_No }}</td>
                                                            <td>{{ $item->Address }}</td>
                                                            <td>{{ $item->email }}</td>
                                                            <td>{{ $item->Comment }}</td>
                                                            <td>{{ $item->Loyalty_Points }}</td>
                                                            <td>
                                                                @if ($item->Status)
                                                                    <span style="color: green">Active</span>
                                                                @else
                                                                    <span style="color: red">Block</span>
                                                                @endif
                                                            </td>
                                                            <td>
                                                                <input type="button" class="btn btn-primary mb-1"
                                                                    value="Change Status"
                                                                    onclick="updateStatusCustomer('{{ $item->idCustomer }}')">
                                                                <input type="button" class="btn btn-danger"
                                                                    value="No Show"
                                                                    onclick="noShow('{{ $item->idCustomer }}')">
                                                                <input type="button" class="btn btn-danger"
                                                                    value="Update" data-toggle="modal"
                                                                    data-target="#customer_details"
                                                                    onclick="view_customer('{{ $item->idCustomer }}','{{ $item->Full_Name }}', '{{ $item->First_Name }}', '{{ $item->Contact_No }}', '{{ $item->Address }}', '{{ $item->email }}', '{{ $item->Comment }}')">
                                                                <a class="btn btn-info" href="{{ route('loyalty.customer', $item->idCustomer) }}">Loyalty</a>
                                                            </td>
                                                        </tr>
                                                    @endif
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="tab-pane fade show" id="custom-tabs-loyalty" role="tabpanel"
                                        aria-labelledby="custom-tabs-two-home-tab">
                                        <table id="example3" style="width:100%" class="table table-bordered table-hover">
                                            <thead>
                                                <tr>
                                                    <th>ID</th>
                                                    <th>First Name</th>
                                                    <th>Last Name</th>
                                                    <th>Contact Number</th>
                                                    <th>Address</th>
                                                    <th>Email</th>
                                                    <th>Comment</th>
                                                    <th>Loyalty Points</th>
                                                    <th>Status</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($customers as $item)
                                                    @if ($item->Status == 1 && $item->Loyalty == 1)
                                                        <tr>
                                                            <td>{{ $item->idCustomer }}</td>
                                                            <td>{{ $item->Full_Name }}</td>
                                                            <td>{{ $item->First_Name }}</td>
                                                            <td>{{ $item->Contact_No }}</td>
                                                            <td>{{ $item->Address }}</td>
                                                            <td>{{ $item->email }}</td>
                                                            <td>{{ $item->Comment }}</td>
                                                            <td>{{ $item->Loyalty_Points }}</td>
                                                            <td>
                                                                @if ($item->Status)
                                                                    <span style="color: green">Active</span>
                                                                @else
                                                                    <span style="color: red">Block</span>
                                                                @endif
                                                            <td style="display:flex;gap:10px;border:none">
                                                                <input type="button" class="btn btn-primary"
                                                                    value="Change Status"
                                                                    onclick="updateStatusCustomer('{{ $item->idCustomer }}')">
                                                                <input type="button" class="btn btn-danger"
                                                                    value="Update" data-toggle="modal"
                                                                    data-target="#customer_details"
                                                                    onclick="view_customer('{{ $item->idCustomer }}','{{ $item->Full_Name }}', '{{ $item->First_Name }}', '{{ $item->Contact_No }}', '{{ $item->Address }}', '{{ $item->email }}', '{{ $item->Comment }}')">
                                                                <a class="btn btn-info" href="{{ route('loyalty.customer', $item->idCustomer) }}">Loyalty</a>
                                                            </td>
                                                        </tr>
                                                    @endif
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="tab-pane fade show" id="custom-tabs-blocked" role="tabpanel"
                                        aria-labelledby="custom-tabs-two-home-tab">
                                        <table id="example4" class="table table-bordered table-hover" style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th>ID</th>
                                                    <th>First Name</th>
                                                    <th>Last Name</th>
                                                    <th>Contact Number</th>
                                                    <th>Address</th>
                                                    <th>Email</th>
                                                    <th>Comment</th>
                                                    <th>Loyalty Points</th>
                                                    <th>Status</th>
                                                    <th>Block Fee</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($customers as $item)
                                                    @if ($item->Status == 0)
                                                        <tr>
                                                            <td>{{ $item->idCustomer }}</td>
                                                            <td>{{ $item->Full_Name }}</td>
                                                            <td>{{ $item->First_Name }}</td>
                                                            <td>{{ $item->Contact_No }}</td>
                                                            <td>{{ $item->Address }}</td>
                                                            <td>{{ $item->email }}</td>
                                                            <td>{{ $item->Comment }}</td>
                                                            <td>{{ $item->Loyalty_Points }}</td>
                                                            <td>
                                                                @if ($item->Status)
                                                                    <span style="color: green">Active</span>
                                                                @else
                                                                    <span style="color: red">Block</span>
                                                                @endif
                                                            </td>
                                                            <td>
                                                                {{ $item->Block_Fee }}
                                                            </td>
                                                            <td style="display: flex; gap: 10px; border:none">
                                                                <input type="button" class="btn btn-primary"
                                                                    value="Change Status"
                                                                    onclick="updateStatusCustomer('{{ $item->idCustomer }}')">
                                                                <input type="button" class="btn btn-danger"
                                                                    value="Update" data-toggle="modal"
                                                                    data-target="#customer_details"
                                                                    onclick="view_customer('{{ $item->idCustomer }}','{{ $item->Full_Name }}', '{{ $item->First_Name }}', '{{ $item->Contact_No }}', '{{ $item->Address }}', '{{ $item->email }}', '{{ $item->Comment }}')">
                                                                <a class="btn btn-info" href="{{ route('loyalty.customer', $item->idCustomer) }}">Loyalty</a>
                                                            </td>
                                                        </tr>
                                                    @endif
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>

    <div class="modal fade bd-example-modal-lg" id="customer_details" tabindex="-1" role="dialog"
        aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Update Customer</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <div class="form-group">
                                    <label for="u_Full_Name">Full Name</label>
                                    <input type="text" name="u_Full_Name" class="form-control" id="u_Full_Name"
                                        placeholder="Enter Full Name">
                                </div>
                            </div>

                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="form-group">
                                    <label for="u_First_Name">First Name</label>
                                    <input type="text" name="u_First_Name" class="form-control" id="u_First_Name"
                                        placeholder="Enter First Name">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="form-group">
                                    <label for="u_Tp">Contact Number</label>
                                    <input type="text" name="u_Tp" class="form-control" id="u_Tp"
                                        placeholder="Enter Contact Number">
                                    <small id="error-message-edit"
                                        class="form-text error-number-message text-danger">Enter a valid number (10 digits
                                        required)</small>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <div class="form-group">
                                    <label for="u_Address">Address</label>
                                    <input type="text" name="u_Address" class="form-control" id="u_Address"
                                        placeholder="Enter Address">
                                </div>
                            </div>

                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="form-group">
                                    <div class="form-group">
                                        <label for="u_Email">Email Address</label>
                                        <input type="email" name="u_Email" class="form-control" id="u_Email"
                                            placeholder="Enter Email Address">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="form-group">
                                    <label for="u_Comment">Comment</label>
                                    <input type="text" name="u_Comment" class="form-control" id="u_Comment"
                                        placeholder="Enter Comment">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary" value="Update Customer"
                            onclick="validateEditSubmitCustomer(event)">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <!-- jQuery -->
    <script src="../plugins/jquery/jquery.min.js"></script>


    <script src="../plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
    <script src="../plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
    <script src="../plugins/jszip/jszip.min.js"></script>
    <script src="../plugins/pdfmake/pdfmake.min.js"></script>
    <script src="../plugins/pdfmake/vfs_fonts.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.html5.min.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.print.min.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../plugins/select2/js/select2.full.min.js"></script>
    <!-- jquery-validation -->
    <script src="../plugins/jquery-validation/jquery.validate.min.js"></script>
    <script src="../plugins/jquery-validation/additional-methods.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../dist/js/adminlte.min.js"></script>

    <!-- AdminLTE for demo purposes -->
    <script src="../dist/js/demo.js"></script>
    <script src="../JS/validate.js"></script>
    <script src="../JS/customer.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $('#example2').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": true,
            // "autoWidth": false,
            "responsive": true,
        });
        $('#example3').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": true,
            // "autoWidth": false,
            "responsive": true,
        });
        $('#example4').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": true,
            // "autoWidth": false,
            "responsive": true,
        });
    </script>
@endsection