@extends('admin.layouts.app')
@section('title', 'Contractor Detail')
@section('page_css')
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
    <style>
        th {
            background-color: #f7f7f7;
        }

    </style>
@endsection
@section('section')
    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">


                </div>
            </div><!-- /.container-fluid -->
        </section>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">

                        <!-- /.card -->

                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Contractor Detail</h3>
                            </div>

                            <!-- /.card-header -->
                            <div class="card-body">
                                <table class="table table-bordered table-striped">
                                    <tr>
                                        <th>Name</th>
                                        <td>{{ $contractor->name ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Email</th>
                                        <td>{{ $contractor->email ?? '' }}</td>
                                        <th>Phone</th>
                                        <td>{{ $contractor->phone ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>City</th>
                                        <td>{{ $contractor->city ?? '' }}</td>
                                        <th>State</th>
                                        <td>{{ $contractor->state ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Country</th>
                                        <td>{{ $contractor->country ?? '' }}</td>
                                        <th>Address</th>
                                        <td>{{ $contractor->address ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>zip</th>
                                        <td>{{ $contractor->zip ?? '' }}</td>
                                        <th>Contractor Details</th>
                                        <td><textarea readonly="">{{ $contractor->details ?? '' }}</textarea></td>
                                    </tr>
                                    <tr>
                                        <th>Profile Image</th>
                                        <td>
                                            <img
                                                src="{{asset('profile_images/'.($contractor->profile_image ?: 'noimage.jpg'))}}"
                                                width="200"></td>
                                    </tr>
                                </table>
                                @if($contractor->crews->count() > 0)
                                    <div class="modal-body">
                                        <div class="form-group">
                                            <label for="crewSelect">View Crew:</label>
                                            <select class="form-control" id="crewSelect">
                                                <option>All Created Members</option>
                                                @foreach($contractor->crews as $crew)
                                                    <option value="{{ $crew->id }}">{{ $crew->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <!-- Display crew details here -->
                                        <div id="crewDetails">
                                        </div>
                                    </div>
                                @endif

                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
                {{--            <div class="row">--}}
                {{--                <div class="col-md-12">--}}
                {{--                    <!-- /.card -->--}}
                {{--                    <div class="card">--}}
                {{--                        <div class="card-header">--}}
                {{--                            <h3 class="card-title">Orders </h3>--}}
                {{--                        </div>--}}
                {{--                        <!-- /.card-header -->--}}
                {{--                        <div class="card-body">--}}
                {{--                            <table id="myTable" class="table table-bordered table-striped">--}}
                {{--                              <thead>--}}
                {{--                                <tr>--}}
                {{--                                    <th>S.No</th>--}}
                {{--                                    <th>Order No</th>--}}
                {{--                                    <th>Total</th>--}}
                {{--                                    <th>Status</th>--}}
                {{--                                    <th>Order Date</th>--}}
                {{--                                </tr>--}}
                {{--                              </thead>--}}
                {{--                              <tbody>--}}
                {{--                      @php $counter=1 @endphp--}}
                {{--                                @foreach ($customerOrders as $orders)--}}
                {{--                                    <tr>--}}
                {{--                                        <td>{{ $counter++ }}</td>--}}
                {{--                                        <td>{{ $orders->order_no }}</td>--}}
                {{--                                        <td>{{ $orders->total_amount }}</td>--}}
                {{--                                        <td>{{ ucfirst($orders->order_status) }}</td>--}}
                {{--                                        <td>{{ date("d-M-Y",strtotime($orders->created_at)) }}</td>--}}
                {{--                                    </tr>--}}
                {{--                                @endforeach--}}
                {{--                            </tbody>--}}
                {{--                            </table>--}}
                {{--                        </div>--}}
                {{--                    </div>--}}
                {{--                </div>--}}
                {{--            </div>--}}
            </div>
            <!-- /.container-fluid -->
        </section>
    </div>
@endsection
@section('script')
    <script src="//cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function () {
            $('#myTable').DataTable();

            // Handle the change event of the crew select dropdown
            $('#crewSelect').change(function () {
                var selectedCrewId = $(this).val();
                if (selectedCrewId) {
                    // Use the named route here
                    var url = "{{ route('admin.contractor.crew.details', ':crewId') }}"; // :crewId is a placeholder

                    // Replace the placeholder with the selectedCrewId
                    url = url.replace(':crewId', selectedCrewId);

                    // Make an AJAX request to retrieve the crew details
                    $.ajax({
                        type: 'GET',
                        url: url,
                        success: function (data) {
                            // Display crew details in the modal
                            var crewDetails = data.crewDetails;
                            var detailsHtml = '<p>Name: ' + crewDetails.name + '</p>';
                            detailsHtml += '<p>Email: ' + crewDetails.email + '</p>';
                            detailsHtml += '<p>Phone: ' + crewDetails.phone + '</p>';
                            detailsHtml += '<p>Time: ' + crewDetails.time + '</p>';
                            detailsHtml += '<p>Date: ' + crewDetails.date + '</p>';
                            // Add more details as needed
                            $('#crewDetails').html(detailsHtml);
                        },
                        error: function () {
                            $('#crewDetails').html('Select Crew To See Details.');
                        }
                    });
                } else {
                    // Clear the crew details if no crew is selected
                    $('#crewDetails').empty();
                }
            });

        });
    </script>
@endsection