@extends('Admin.layout')

@section('content')

<style>
    .page-header {
        background: linear-gradient(135deg, #046a36cf, #33ee8dcf);
        border-radius: 18px;
        padding: 28px 35px;
        color: #fff;
        margin-bottom: 25px;
    }

    .page-header h3{
        color:#fff;
        font-weight:700;
        margin-bottom:5px;
    }

    .page-header p{
        /* color:rgba(255,255,255,.85); */
        margin:0;
    }

    .contact-card{
        border:none;
        border-radius:20px;
        overflow:hidden;
        box-shadow:0 15px 35px rgba(0,0,0,.08);
    }

    .contact-card .card-header{
        /* background:#fff; */
        border-bottom:1px solid #eef2f7;
        margin-bottom: 10px;
        padding:22px 28px;
    }

    .contact-card .card-header h5{
        margin:0;
        font-weight:700;
        /* color:#1f2937; */
    }

    .contact-card .card-body{
        padding:30px;
    }

    .form-label{
        font-weight:600;
        /* color:#374151; */
        margin-bottom:8px;
    }

    .input-group-text{
        width:48px;
        justify-content:center;
        /* background:#f8fafc; */
        /* border:1px solid #dbe4ee; */
        /* color:#2563eb; */
    }

    .form-control,
    .form-control:focus,
    textarea.form-control{
        /* border:1px solid #dbe4ee; */
        border-radius:10px;
        min-height:48px;
        box-shadow:none;
    }

    textarea.form-control{
        /* min-height:120px; */
        resize:none;
    }

    .btn-save{
        border-radius:10px;
        padding:12px 30px;
        font-weight:600;
    }

    .section-title{
        font-size:13px;
        font-weight:700;
        /* color:#2563eb; */
        letter-spacing:1px;
        text-transform:uppercase;
        margin-bottom:20px;
    }
</style>

<div class="container-fluid mt-4">

    <div class="page-header">
        <h3>
            <i class="ti tabler-address-book me-2"></i>
            Contact Information
        </h3>
        <p>
            Manage your clinic's contact details that will be displayed throughout the application.
        </p>
    </div>

<form action="{{ route('clinic_contact_save') }}" method="POST">
    @csrf

    <div class="card contact-card">
        <div class="card-header">
            <h5>
                <i class="ti tabler-building me-2"></i>
                Clinic Contact Details
            </h5>
        </div>

        <div class="card-body">
          

            <div class="row">
                <!-- Mobile Number -->
                <div class="col-md-6 mb-4">
                    <label class="form-label">Mobile Number</label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="ti tabler-device-mobile"></i>
                        </span>
                        <input type="text" class="form-control" name="mobile" placeholder="Enter mobile number" required>
                    </div>
                </div>

                <!-- Email Address -->
                <div class="col-md-6 mb-4">
                    <label class="form-label">Email Address</label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="ti tabler-mail"></i>
                        </span>
                        <input type="email" class="form-control" name="email" placeholder="Enter email address" required>
                    </div>
                </div>

                <!-- Working Hours (பெயர் மாற்றப்பட்டுள்ளது) -->
                <div class="col-md-12 mb-4">
                    <label class="form-label">Working Hours</label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="ti tabler-building-hospital"></i>
                        </span>
                        <input type="text" class="form-control" name="working_hours" placeholder="Enter working hours" required>
                    </div>
                </div>

                <!-- Address -->
                <div class="col-12">
                    <label class="form-label">Address</label>
                    <div class="input-group">
                        <span class="input-group-text align-items-start pt-3">
                            <i class="ti tabler-map-pin"></i>
                        </span>
                        <textarea class="form-control" name="address" placeholder="Enter complete clinic address" required></textarea>
                    </div>
                </div>
                <!-- Social Media Links -->
<div class="col-12 mt-4">

    <div class="section-title">
        Social Media Links
    </div>

</div>

<!-- Instagram -->
<div class="col-md-6 mb-4">
    <label class="form-label">Instagram</label>

    <div class="input-group">
        <span class="input-group-text">
            <i class="ti tabler-brand-instagram"></i>
        </span>

        <input
            type="url"
            class="form-control"
            name="instagram"
            placeholder="https://instagram.com/yourpage"
            value="{{ old('instagram') }}"
        >
    </div>
</div>

<!-- Facebook -->
<div class="col-md-6 mb-4">
    <label class="form-label">Facebook</label>

    <div class="input-group">
        <span class="input-group-text">
            <i class="ti tabler-brand-facebook"></i>
        </span>

        <input
            type="url"
            class="form-control"
            name="facebook"
            placeholder="https://facebook.com/yourpage"
            value="{{ old('facebook') }}"
        >
    </div>
</div>

<!-- YouTube -->
<div class="col-md-6 mb-4">
    <label class="form-label">YouTube</label>

    <div class="input-group">
        <span class="input-group-text">
            <i class="ti tabler-brand-youtube"></i>
        </span>

        <input
            type="url"
            class="form-control"
            name="youtube"
            placeholder="https://youtube.com/@yourchannel"
            value="{{ old('youtube') }}"
        >
    </div>
</div>

<!-- Telegram -->
<div class="col-md-6 mb-4">
    <label class="form-label">Telegram</label>

    <div class="input-group">
        <span class="input-group-text">
            <i class="ti tabler-brand-telegram"></i>
        </span>

        <input
            type="url"
            class="form-control"
            name="telegram"
            placeholder="https://t.me/yourchannel"
            value="{{ old('telegram') }}"
        >
    </div>
</div>
            </div>
        </div>

        <div class="text-center border-top text-end py-3 px-4">
            <button type="submit" class="btn btn-primary btn-save">
                <i class="ti tabler-device-floppy me-1"></i>
                Save Contact Details
            </button>
        </div>
    </div>
</form>
<div class="card mt-4">
    <div class="card-header">
        <h5>Contact Details List</h5>
    </div>

    <div class="card-body">
        <table class="table table-bordered" id="contactTable" width="100%">
            <thead>
                <tr>
                    <th>S.No</th>
                    <th>Mobile</th>
                    <th>Email</th>
                    <th>Working Hours</th>
                    <th>Address</th>
                    <th>Status</th>
                    <th>Created On</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {

    $('#contactTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('clinic_contact_data') }}",

        columns: [
            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                searchable: false,
                orderable: false
            },
            {
                data: 'mobile',
                name: 'mobile'
            },
            {
                data: 'email',
                name: 'email'
            },
            {
                data: 'working_hours',
                name: 'working_hours'
            },
            {
                data: 'address',
                name: 'address'
            },
            {
                data: 'is_active',
                name: 'is_active'
            },
            {
                data: 'created_at',
                name: 'created_at'
            }
        ]
    });

});
</script>
@endsection