@extends('admin.layout.index')
@section('title', 'Waiting Room | Clinic Details')
@section('custom-style')
    <style>
		.pos-abs{
			position: absolute;
			right: 15px;
			top: 15px;
		}
    </style>
@endsection
@section('content')

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
                        <h4 class="mb-sm-0">{{ __('translations.Clinic Details') }}</h4>
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('translations.Admin') }}</a></li>
                                <li class="breadcrumb-item active">{{ __('translations.Clinic Detail') }}</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->
			
			<div class="row">
				<div class="col-xxl-4">
					<div class="card" style="min-height: 515px;">
						<div class="card-body p-4">
							<div>
								<p class="pos-abs"><span
                                    class="badge
                                    @if ($clinic->status === 'Approved') bg-success
                                    @elseif($clinic->status === 'Pending') bg-warning
                                    @else bg-danger @endif">
                                    {{ $clinic->status }}
                                </span></p>
								<div class="flex-shrink-0 avatar-md mx-auto">
									<div class="avatar-title bg-light rounded">
										<img src="assets/images/companies/img-2.png" alt="" height="50" />
									</div>
								</div>
								<div class="mt-4 text-center">
									<h5 class="mb-1">{{ $clinic->name }}</h5>
									<p class="text-muted mb-1">Since 1987</p>
									
								</div>
								<div class="table-responsive">
									<table class="table mb-0 table-borderless">
										<tbody>
											<tr>
												<th><span class="fw-medium">Owner</span></th>
												<td>David Marshall</td>
											</tr>
										
											<tr>
												<th><span class="fw-medium">Email</span></th>
												<td>{{ $clinic->email }}</td>
											</tr>
											
											
											<tr>
												<th><span class="fw-medium">Location</span></th>
												<td>{{ $clinic->location }}</td>
											</tr>
											<tr>
												<th><span class="fw-medium">Document</span></th>
												<td><a target="_blank"
                                    href="{{ asset($clinic->company_document) }}" class="btn btn-sm btn-primary">{{ __('translations.Click here to view document') }}</a></td>
											</tr>
										</tbody>
									</table>
								</div>
								<div class="row mt-4 text-center">                    
									<div class="col-lg-6 border-end-dashed border-end">                        
										<h5>363</h5>      
										<span class="text-muted">Total Doctors</span>                    
									</div>                    
									<div class="col-lg-6">                        
										<h5>426</h5>                        
										<span class="text-muted">Total Appointments</span>                   
									</div>                
								</div>
							</div>
						</div>
						<!--end card-body-->

					</div>
					<!--end card-->
				</div>
				<!--end col-->
				<div class="col-sm-8">
					<div class="card">
                                <div class="card-header border-0 align-items-center d-flex">
                                    <h4 class="card-title mb-0 flex-grow-1">Earnings</h4>
                                    <div>
                                        <button type="button" class="btn btn-soft-secondary btn-sm">
                                            ALL
                                        </button>
                                        <button type="button" class="btn btn-soft-secondary btn-sm">
                                            1M
                                        </button>
                                        <button type="button" class="btn btn-soft-secondary btn-sm">
                                            6M
                                        </button>
                                        <button type="button" class="btn btn-soft-primary btn-sm">
                                            1Y
                                        </button>
                                    </div>
                                </div><!-- end card header -->

                                <div class="card-header p-0 border-0 bg-light-subtle">
                                    <div class="row g-0 text-center">
                                        <div class="col-6 col-sm-3">
                                            <div class="p-3 border border-dashed border-start-0">
                                                <h5 class="mb-1"><span class="counter-value" data-target="7585">0</span></h5>
                                                <p class="text-muted mb-0">Bookings</p>
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-6 col-sm-3">
                                            <div class="p-3 border border-dashed border-start-0">
                                                <h5 class="mb-1">$<span class="counter-value" data-target="22.89">0</span>k</h5>
                                                <p class="text-muted mb-0">Earnings</p>
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-6 col-sm-3">
                                            <div class="p-3 border border-dashed border-start-0">
                                                <h5 class="mb-1"><span class="counter-value" data-target="367">0</span></h5>
                                                <p class="text-muted mb-0">Refunds</p>
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-6 col-sm-3">
                                            <div class="p-3 border border-dashed border-start-0 border-end-0">
                                                <h5 class="mb-1 text-success"><span class="counter-value" data-target="18.92">0</span>%</h5>
                                                <p class="text-muted mb-0">Conversation Ratio</p>
                                            </div>
                                        </div>
                                        <!--end col-->
                                    </div>
                                </div><!-- end card header -->

                                <div class="card-body p-0 pb-2">
                                    <div>
                                        <div id="customer_impression_charts" data-colors='["--vz-primary", "--vz-success", "--vz-danger"]' data-colors-minimal='["--vz-primary-rgb, 0.1", "--vz-primary", "--vz-primary-rgb, 0.6"]' data-colors-saas='["--vz-success", "--vz-primary", "--vz-danger"]' data-colors-creative='["--vz-warning", "--vz-secondary", "--vz-success"]' class="apex-charts"></div>
                                    </div>
                                </div><!-- end card body -->
                            </div><!-- end card -->
				</div>
			</div>

            

            <!-- Doctors Table Section -->
            <div class="row mt-4">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header border-bottom-dashed">
                            <div class="row g-4 align-items-center">
                                <div class="col-sm">
                                    <h5 class="card-title mb-0">{{ __('translations.Doctors') }}</h5>
                                </div>
                            </div>
                        </div>
                        <div class="card-body table-responsive">
                            <table id="doctors-table" class="table nowrap align-middle" style="width:100%">
                                <thead class="text-muted table-light">
                                    <tr class="text-uppercase">
                                        <th>{{ __('translations.No.') }}</th>
                                        <th>{{ __('translations.Name') }}</th>
                                        <th>{{ __('translations.Speciality') }}</th>
                                        <th>{{ __('translations.Service Time') }}</th>
                                        <th>{{ __('translations.Service Price') }}</th>
                                        {{-- <th>Status</th> --}}
                                        <th>{{ __('translations.Action') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- <!-- Doctor row 1 -->
                                    <tr>
                                        <td>01</td>
                                        <td><a href="{{ route('doctors-detail') }}">Dr. John Doe</a></td>
                                        <td>Cardiology</td>
                                        <td>9:00 AM - 1:00 PM</td>
                                        <td>$150</td>
                                        <td><span class="badge bg-warning">Pending</span></td>
                                        <td>
                                            <div class="d-flex">
                                                <a href="edit.html" class="btn btn-primary shadow btn-xs sharp me-1">
                                                    <i class="bx bx-edit"></i>
                                                </a>
                                                <a href="" class="btn btn-danger shadow btn-xs sharp"
                                                    data-bs-toggle="modal" data-bs-target="#deleteDoctorModal">
                                                    <i class="bx bx-trash"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- Doctor row 2 -->
                                    <tr>
                                        <td>02</td>
                                        <td><a href="{{ route('doctors-detail') }}">Dr. Sarah Williams</a></td>
                                        <td>Pediatrics</td>
                                        <td>10:00 AM - 4:00 PM</td>
                                        <td>$200</td>
                                        <td><span class="badge bg-success">Approved</span></td>
                                        <td>
                                            <div class="d-flex">
                                                <a href="edit.html" class="btn btn-primary shadow btn-xs sharp me-1">
                                                    <i class="bx bx-edit"></i>
                                                </a>
                                                <a href="" class="btn btn-danger shadow btn-xs sharp"
                                                    data-bs-toggle="modal" data-bs-target="#deleteDoctorModal">
                                                    <i class="bx bx-trash"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- Doctor row 3 -->
                                    <tr>
                                        <td>03</td>
                                        <td><a href="{{ route('doctors-detail') }}">Dr. Mark Spencer</a></td>
                                        <td>Dermatology</td>
                                        <td>11:00 AM - 3:00 PM</td>
                                        <td>$180</td>
                                        <td><span class="badge bg-success">Approved</span></td>
                                        <td>
                                            <div class="d-flex">
                                                <a href="edit.html" class="btn btn-primary shadow btn-xs sharp me-1">
                                                    <i class="bx bx-edit"></i>
                                                </a>
                                                <a href="" class="btn btn-danger shadow btn-xs sharp"
                                                    data-bs-toggle="modal" data-bs-target="#deleteDoctorModal">
                                                    <i class="bx bx-trash"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr> --}}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Bookings Table Section -->
                    <div class="card mt-4">
                        <div class="card-header border-bottom-dashed">
                            <div class="row g-4 align-items-center">
                                <div class="col-sm">
                                    <h5 class="card-title mb-0">{{ __('translations.Bookings') }}</h5>
                                </div>
                            </div>
                        </div>
                        <div class="card-body table-responsive">
                            <table id="booking-table" class="table nowrap align-middle" style="width:100%">
                                <thead class="text-muted table-light">
                                    <tr class="text-uppercase">
                                        <th>{{ __('translations.No.') }}</th>
                                        <th>{{ __('translations.Patient Name') }}</th>
                                        <th>{{ __('translations.Doctors') }}</th>
                                        {{-- <th>Services</th> --}}
                                        <th>{{ __('translations.Total Price') }}</th>
                                        <th>{{ __('translations.Date') }}</th>
                                        <th>{{ __('translations.Status') }}</th>
                                        <th>{{ __('translations.Action') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- <!-- Booking row 1 -->
                                    <tr>
                                        <td>01</td>
                                        <td><a href="{{ route('admin-appointments-detail') }}">John Doe</a></td>
                                        <td>Dr. John Doe</td>
                                        <td>General Checkup</td>
                                        <td>$100</td>
                                        <td>9 July, 2024</td>
                                        <td><span class="badge bg-success">Completed</span></td>
                                        <td>
                                            <a href="" class="btn btn-danger shadow btn-xs sharp"
                                                data-bs-toggle="modal" data-bs-target="#deleteBookingModal">
                                                <i class="bx bx-trash"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    <!-- Booking row 2 -->
                                    <tr>
                                        <td>02</td>
                                        <td><a href="{{ route('admin-appointments-detail') }}">Jane Smith</a></td>
                                        <td>Dr. Sarah Williams</td>
                                        <td>Cardiology Consultation</td>
                                        <td>$250</td>
                                        <td>12 July, 2024</td>
                                        <td><span class="badge bg-warning">Pending</span></td>
                                        <td>
                                            <a href="" class="btn btn-danger shadow btn-xs sharp"
                                                data-bs-toggle="modal" data-bs-target="#deleteBookingModal">
                                                <i class="bx bx-trash"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    <!-- Booking row 3 -->
                                    <tr>
                                        <td>03</td>
                                        <td><a href="{{ route('admin-appointments-detail') }}">Michael Johnson</a></td>
                                        <td>Dr. Mark Spencer</td>
                                        <td>Skin Treatment</td>
                                        <td>$180</td>
                                        <td>15 July, 2024</td>
                                        <td><span class="badge bg-success">Completed</span></td>
                                        <td>
                                            <a href="" class="btn btn-danger shadow btn-xs sharp"
                                                data-bs-toggle="modal" data-bs-target="#deleteBookingModal">
                                                <i class="bx bx-trash"></i>
                                            </a>
                                        </td>
                                    </tr> --}}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Delete Doctor Modal -->
                    <div class="modal fade" id="deleteDoctorModal" tabindex="-1" aria-labelledby="deleteDoctorModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="deleteDoctorModalLabel">{{ __('translations.Delete Doctor') }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <form id="deleteUser">
                                    @csrf
                                    <input type="hidden" name="id" id="deleteUserId">
                                    <div class="modal-body">
                                        <p>{{ __('translations.Are you sure you want to delete this doctor?') }}</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('translations.Cancel') }}
                                        </button>
                                        <button type="submit" id="submitDelForm" class="btn btn-danger">{{ __('translations.Delete') }}</button>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>

                    <!-- Delete Booking Modal -->
                    <div class="modal fade" id="deleteBookingModal" tabindex="-1" aria-labelledby="deleteBookingModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="deleteBookingModalLabel">{{ __('translations.Delete Booking') }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <form id="deleteBooking">
                                    @csrf
                                    <input type="hidden" name="id" id="deleteBookingId">
                                    <div class="modal-body">
                                        <p>{{ __('translations.Are you sure you want to delete this booking?') }}</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('translations.Cancel') }}
                                        </button>
                                        <button type="submit" class="btn btn-danger">{{ __('translations.Delete') }}</button>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- container-fluid -->
        </div>
        <!-- End Page-content -->
    </div>

@endsection
@section('custom-script')
    <script>
        $(document).ready(function() {
            // Doctors DataTable
            $('#doctors-table').DataTable({
                processing: true,
                serverSide: true,
                ordering: false,
                ajax: {
                    url: "{{ route('clinic.doctors.data', $clinic->id) }}", // Pass clinic ID
                    type: "GET",
                },
                columns: [{
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row, meta) {
                            return meta.row + 1 + (meta.settings
                                ._iDisplayStart); // Calculate serial number
                        },
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'speciality_name',
                        name: 'speciality_name'
                    },
                    {
                        data: 'service_time',
                        name: 'service_time'
                    },
                    {
                        data: 'service_charges',
                        name: 'service_charges'
                    },
                    // { data: 'status', name: 'status', render: function (data, type, row) {
                    //     let badgeClass = data === 'Approved' ? 'bg-success' : (data === 'Pending' ? 'bg-warning' : 'bg-danger');
                    //     return `<span class="badge ${badgeClass}">${data}</span>`;
                    // }},
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            // Bookings DataTable
            $('#booking-table').DataTable({
                processing: true,
                serverSide: true,
                ordering: false,
                ajax: {
                    url: "{{ route('clinic.bookings.data', $clinic->id) }}",
                    type: "GET",
                },
                columns: [{
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row, meta) {
                            return meta.row + 1 + (meta.settings
                                ._iDisplayStart); // Calculate serial number
                        },
                    },
                    {
                        data: 'patient_name',
                        name: 'patient_name'
                    },
                    {
                        data: 'doctor_name',
                        name: 'doctor_name'
                    },
                    // { data: 'services', name: 'services' },
                    {
                        data: 'total_price',
                        name: 'total_price'
                    },
                    {
                        data: 'date',
                        name: 'date'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });

        // Delete
        function deleteBookingRecord(id) {
            $('#deleteBookingId').val(id);
        }



        $("#deleteBooking").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#submitDelForm");
            const modal = $('#deleteModal');
            let formData = new FormData($("#deleteBooking")[0]);
            $.ajax({
                type: "POST",
                url: "{{ route('clinicBooking.delete') }}",
                dataType: 'json',
                contentType: false,
                processData: false,
                cache: false,
                data: formData,
                beforeSend: function() {
                    btn.prop('disabled', true);
                    btn.html(
                        '<div class="spinner-border" role="status" style="height: 14px;width: 14px;accent-color: ;"> <span class="visually-hidden">Loading...</span> </div>'
                    );
                    $('.error-message').html('');
                },
                success: function(res) {
                    if (res.success === true) {
                        btn.prop('disabled', false);
                        btn.html('Delete');
                        modal.modal('hide');
                        notyf.success({
                            message: res.message,
                            duration: 3000
                        });
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);

                    } else {
                        btn.prop('disabled', false);
                        btn.html('Delete');
                        modal.modal('hide');
                        notyf.error({
                            message: res.message,
                            duration: 3000
                        });
                    }
                },
                error: function(e) {
                    btn.prop('disabled', false);
                    btn.html('Delete');
                }
            });
        });

        // Delete
        function deleteRecord(id) {
            $('#deleteUserId').val(id);
        }



        $("#deleteUser").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#submitDelForm");
            const modal = $('#deleteModal');
            let formData = new FormData($("#deleteUser")[0]);
            $.ajax({
                type: "POST",
                url: "{{ route('doctor.delete') }}",
                dataType: 'json',
                contentType: false,
                processData: false,
                cache: false,
                data: formData,
                beforeSend: function() {
                    btn.prop('disabled', true);
                    btn.html(
                        '<div class="spinner-border" role="status" style="height: 14px;width: 14px;accent-color: ;"> <span class="visually-hidden">Loading...</span> </div>'
                    );
                    $('.error-message').html('');
                },
                success: function(res) {
                    if (res.success === true) {
                        btn.prop('disabled', false);
                        btn.html('Delete');
                        modal.modal('hide');
                        notyf.success({
                            message: res.message,
                            duration: 3000
                        });
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);

                    } else {
                        btn.prop('disabled', false);
                        btn.html('Delete');
                        modal.modal('hide');
                        notyf.error({
                            message: res.message,
                            duration: 3000
                        });
                    }
                },
                error: function(e) {
                    btn.prop('disabled', false);
                    btn.html('Delete');
                }
            });
        });
		
		function getChartColorsArray(e) {
    if (document.getElementById(e) !== null) {
        var t = "data-colors" + ("-" + document.documentElement.getAttribute("data-theme") ?? ""),
            t = document.getElementById(e).getAttribute(t) ?? document.getElementById(e).getAttribute("data-colors");

        if (t) {
            return (t = JSON.parse(t)).map(function (e) {
                var t = e.replace(" ", "");
                return t.indexOf(",") === -1
                    ? getComputedStyle(document.documentElement).getPropertyValue(t) || t
                    : (e = e.split(","), e.length === 2)
                    ? "rgba(" + getComputedStyle(document.documentElement).getPropertyValue(e[0]) + "," + e[1] + ")"
                    : t;
            });
        }
        console.warn("data-colors attributes not found on", e);
    }
}

var linechartcustomerColors = getChartColorsArray("customer_impression_charts");

if (linechartcustomerColors) {
    var options = {
        series: [
            { name: "Bookings", type: "area", data: [34, 65, 46, 68, 49, 61, 42, 44, 78, 52, 63, 67] },
            { name: "Earnings", type: "bar", data: [89.25, 98.58, 68.74, 108.87, 77.54, 84.03, 51.24, 28.57, 92.57, 42.36, 88.51, 36.57] },
            { name: "Refunds", type: "line", data: [8, 12, 7, 17, 21, 11, 5, 9, 7, 29, 12, 35] },
        ],
        chart: { height: 370, type: "line", toolbar: { show: false } },
        stroke: { curve: "straight", dashArray: [0, 0, 8], width: [2, 0, 2.2] },
        fill: { opacity: [0.1, 0.9, 1] },
        markers: { size: [0, 0, 0], strokeWidth: 2, hover: { size: 4 } },
        xaxis: {
            categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            axisTicks: { show: false },
            axisBorder: { show: false },
        },
        grid: { show: true, xaxis: { lines: { show: true } }, yaxis: { lines: { show: false } }, padding: { top: 0, right: -2, bottom: 15, left: 10 } },
        legend: { show: true, horizontalAlign: "center", offsetX: 0, offsetY: -5, markers: { width: 9, height: 9, radius: 6 }, itemMargin: { horizontal: 10, vertical: 0 } },
        plotOptions: { bar: { columnWidth: "30%", barHeight: "70%" } },
        colors: linechartcustomerColors,
        tooltip: {
            shared: true,
            y: [
                { formatter: (e) => (e !== undefined ? e.toFixed(0) : e) },
                { formatter: (e) => (e !== undefined ? "$" + e.toFixed(2) + "k" : e) },
                { formatter: (e) => (e !== undefined ? e.toFixed(0) + " Sales" : e) },
            ],
        },
    };

    var chart = new ApexCharts(document.querySelector("#customer_impression_charts"), options);
    chart.render();
}
    </script>

@endsection