@extends('layouts.app')

@section('content')
<div class="contents">
    <div class="crm mb-25">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 d-flex justify-content-end">
                    @include('layouts.navigation')
                </div>

                <!-- Header -->
                <div class="col-lg-12">
                    <div class="breadcrumb-main d-flex justify-content-between align-items-center">
                        <h2 class="breadcrumb-title">Site Configuration</h2>
                        <button class="btn btn-primary btn-squared" data-bs-toggle="modal" data-bs-target="#modal-basic">
                            Edit Configuration <i class="fa-solid fa-pen ms-2"></i>
                        </button>
                    </div>
                </div>

                <!-- Current Config Display -->
                <div class="col-xxl-12">
                    <div class="userDatatable card adv-table-table global-shadow border-light-0 w-100 adv-table p-3">
                        <div class="row">
                                <div class="form-group mb-3 col-6 d-flex align-items-center">
                                    <label class="fw-bold">Email:</label>
                                    <div class="">{{ $config->email }}</div>
                                </div>
                                 <div class="form-group mb-3 col-6 d-flex align-items-center">
                                    <label class="fw-bold">Phone Number:</label>
                                    <div>{{ $config->phone_number ?? '' }}</div>
                                </div>
                                 <div class="form-group mb-3 col-6 d-flex align-items-center">
                                    <label class="fw-bold">Fax Number:</label>
                                    <div>{{ $config->fax_no ?? ''}}</div>
                                </div>
                                <div class="form-group mb-3 col-6 d-flex align-items-center">
                                    <label class="fw-bold">Site Logo:</label><br>
                                    <img src="{{ url($config->site_logo) }}" alt="Site Logo" height="40" class="rounded">
                                </div>
                                <div class="form-group mb-3 col-6 d-flex align-items-center">
                                    <label class="fw-bold">Site Favicon:</label><br>
                                    <img src="{{ url($config->site_favicon) }}" alt="Site Favicon" height="30" class="rounded">
                                </div>
                           
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="modal-basic" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content modal-bg-white">
                    <div class="modal-header">
                        <h3 class="modal-title">Edit Site Configuration</h3>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="configForm" class="p-3" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="id" id="permission_id" value="site_configuration">

                                <div class="row">                   
                                    <div class="form-group mb-3 col-4">
                                        <label class="il-gray fs-14 fw-500 align-center mb-10">Email <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control ih-medium ip-light radius-xs b-light px-15" name="email" value="{{ $config->email ?? '' }}" class="form-control" placeholder="Enter Phone Number">
                                    </div>
                                    <div class="form-group mb-3 col-4">
                                         <label class="il-gray fs-14 fw-500 align-center mb-10">Phone Number<span class="text-danger">*</span></label>
                                        <input class="form-control ih-medium ip-light radius-xs b-light px-15" type="text" name="phone_number" value="{{ $config->phone_number ?? '' }}" class="form-control" placeholder="Enter Phone Number">
                                    </div>
                                    <div class="form-group mb-3 col-4">
                                       <label class="il-gray fs-14 fw-500 align-center mb-10">FAX No.<span class="text-danger">*</span></label>
                                        <input class="form-control ih-medium ip-light radius-xs b-light px-15" type="text" name="fax_no" value="{{ $config->fax_no ?? '' }}" class="form-control" placeholder="Enter Fax Number">
                                    </div>

                                    <div class="form-group mb-3 col-12">
                                       <label class="il-gray fs-14 fw-500 align-center mb-10">Site Logo</label>
                                        <input class="form-control  ip-light radius-xs b-light px-15" type="file" name="site_logo" id="site_logo" class="form-control">
                                        @if($config->site_logo)
                                            <div class="mt-2">
                                                <img src="{{ url($config->site_logo) }}" height="50">
                                            </div>
                                        @endif
                                    </div>

                                    <div class="form-group mb-3 col-12">
                                        <label class="il-gray fs-14 fw-500 align-center mb-10">Site Favicon</label>
                                        <input class="form-control ip-light radius-xs b-light px-15" type="file" name="site_favicon" id="site_favicon" class="form-control">
                                        @if($config->site_favicon)
                                            <div class="mt-2">
                                                <img src="{{ url($config->site_favicon) }}" height="30">
                                            </div>
                                        @endif
                                    </div>

                                    <button type="submit" class="btn btn-primary btn-rounded mt-3 w-100">Save</button>
                              
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scripts -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script>
            $(function () {
                $.ajaxSetup({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
                });

                $('#configForm').on('submit', function (e) {
                    e.preventDefault();
                    let id = $('#permission_id').val();
                    let formData = new FormData(this);
                    formData.append('_method', 'POST');

                    $.ajax({
                         url: `{{ route('pages.store') }}`,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function () {
                            $('#modal-basic').modal('hide');
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: 'Configuration saved successfully!',
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => location.reload());
                        },
                        error: function (xhr) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: xhr.responseJSON?.message || 'Something went wrong!'
                            });
                        }
                    });
                });
            });
        </script>
    </div>
</div>
@endsection