@extends('admin.layout')
@section('title', 'Adverisement')
@section('header')
    <!-- DataTable CSS -->
    <link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/buttons.dataTables.min.css">
@endsection
@section('content')
    <div class="container-fluid page-wrapper">
        <div class="row">
            <div class="">
                <h3 class="page-top-heading">Advertisement</h3>
            </div>
        </div>
        <form action="{{ route('add_advertisement') }}" method="POST" enctype="multipart/form-data"
            class="row gy-3 align-items-center">
            @csrf

            <div class="col-12 col-md-4">
                <label for="state_id" class="form-label">Select State</label>
                <select name="state_id" id="state_id" class="form-select">
                    <option value="">-- Select State --</option>
                    @foreach ($states as $state)
                        <option value="{{ $state->id }}">{{ $state->state_name }}</option>
                    @endforeach
                </select>
                @error('state_id')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-12 col-md-4">
                <label for="district_id" class="form-label">Select District</label>
                <select name="district_id" id="district_id" class="form-select">
                    <option value="">-- Select District --</option>
                </select>
                @error('district_id')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-12 col-md-4">
                <label for="taluk_id" class="form-label">Select Taluk</label>
                <select name="taluk_id" id="taluk_id" class="form-select">
                    <option value="">-- Select Taluk --</option>
                </select>
                @error('taluk_id')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>


            <div class="col-12">
                <label class="form-label">Image <small class="ms-1" style="color:#979797;">(size 342px - 170px, Max 5MB,
                        JPG Only)</small></label>
                <div class="ad-upload-wrapper" id="ad-upload-wrapper">
                    <div id="ad-upload-conditions" class="ad-upload-conditions text-center">
                        <div><i class="fa-solid fa-file-arrow-up upload-icon"></i></div>
                        <p class="text-center click-to-upload">Click to Upload</p>
                    </div>
                    <img src="" id="ad-img-view" class="img-fluid img-responsive" style="display: none;">
                    <input style="display:none;" name="image" class="upload-ads-img" type="file" id="upload-ad-img"
                        accept="image/jpeg">
                </div>
                @error('image')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>

<div class="col-12 col-md-4">
    <label for="whatsapp_number" class="form-label">
        WhatsApp Number
    </label>
    <input type="text"
           name="whatsapp_number"
           id="whatsapp_number"
           class="form-control"
           value="{{ old('whatsapp_number') }}" maxlength="10"
           oninput="this.value=this.value.replace(/[^0-9]/g,'').slice(0,10)"
           placeholder="Enter WhatsApp Number">

    @error('whatsapp_number')
        <div class="text-danger">{{ $message }}</div>
    @enderror
</div>

<div class="col-12 col-md-4">
    <label for="phone_number" class="form-label">
        Phone Number
    </label>
    <input type="text"
           name="phone_number"
           id="phone_number"
           class="form-control"
           value="{{ old('phone_number') }}" maxlength="10"
           oninput="this.value=this.value.replace(/[^0-9]/g,'').slice(0,10)"
           placeholder="Enter Phone Number">

    @error('phone_number')
        <div class="text-danger">{{ $message }}</div>
    @enderror
</div>

<div class="col-12 col-md-4">
    <label for="link" class="form-label">
        Link
    </label>
    <input type="url"
           name="link"
           id="link"
           class="form-control"
           value="{{ old('link') }}"
           placeholder="https://example.com">

    @error('link')
        <div class="text-danger">{{ $message }}</div>
    @enderror
</div>

            <input type="hidden" name="type" value="banner">

            <div class="col-12 mt-3">
                <button type="submit" class="btn btn-primary submit-btn">
                    <i class="fa-regular fa-circle-check me-2"></i>Submit
                </button>
            </div>
        </form>

        <!-- Table Row -->
        <div class="row mt-4">
            <div class="col-lg-12">
                <div class="card datatable-card">
                    <div class="card-body">
                        <table id="data-table" class="table nowrap align-middle" style="width:100%">
                            <thead>
                                <tr>
                                    <th>SN</th>
                                    <th>CREATED ON</th>
                                    <th>PREVIEW</th>
                                    <th>STATE</th>
                                    <th>DISTRICT</th>
                                    <th>TALUK</th>
 <th>WHATSAPP NO.</th>
                                    <th>PHONE NO.</th>
                                    <th>LINK</th>
                                    
                                    <th>STATUS</th>
                                    <th>ACTION</th>
                                </tr>
                            </thead>
                            @php
                                $sn = 1; // Initialize serial number
                            @endphp
                            <tbody>
                                @foreach ($advertisement as $advertise)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $advertise->created_at->format('Y-m-d') }}</td>
                                        <td>
    @php
        $advertiseImageUrl = null;

        $digitalOceanBaseUrl =
            'https://dstone.sfo3.digitaloceanspaces.com';

        if (!empty($advertise->image)) {

            $storedImage = ltrim(
                trim($advertise->image),
                '/'
            );

            /*
            |--------------------------------------------------------------------------
            | Already full URL
            |--------------------------------------------------------------------------
            */
            if (
                str_starts_with(
                    $storedImage,
                    'http://'
                ) ||
                str_starts_with(
                    $storedImage,
                    'https://'
                )
            ) {
                $advertiseImageUrl =
                    $storedImage;

            /*
            |--------------------------------------------------------------------------
            | DigitalOcean paths
            |--------------------------------------------------------------------------
            */
            } elseif (
                str_starts_with(
                    $storedImage,
                    'advertisement/'
                ) ||
                str_starts_with(
                    $storedImage,
                    'icons/'
                )
            ) {
                $advertiseImageUrl =
                    rtrim(
                        $digitalOceanBaseUrl,
                        '/'
                    ) .
                    '/' .
                    $storedImage;

            /*
            |--------------------------------------------------------------------------
            | Old local image path
            |--------------------------------------------------------------------------
            */
            } else {
                $advertiseImageUrl =
                    asset($storedImage);
            }
        }
    @endphp

    @if($advertiseImageUrl)

        <img src="{{ $advertiseImageUrl }}"
             class="preview-td-img"
             alt="Advertisement image"
             loading="lazy"
             onerror="
                this.style.display='none';
                this.nextElementSibling.style.display='inline';
             ">

        <span class="text-danger"
              style="display:none;">

            Image not found

        </span>

    @else

        <span class="text-muted">
            Null
        </span>

    @endif
</td>
                                        <td>{{ $advertise->state }}</td>
                                        <td>{{ $advertise->district }}</td>
                                        <td>{{ $advertise->taluk }}</td>
                                        <td>{{ $advertise->whatsapp_number ?: '-' }}</td>
<td>{{ $advertise->phone_number ?: '-' }}</td>
<td>{{ $advertise->link ?: '-' }}</td>
                                        <td>
                                            @if ($advertise->is_active == 0)
                                                <span class="active-status">Inactive</span>
                                            @else
                                                <span class="active-status">Active</span>
                                            @endif
                                        </td>
                                        <td>
                                            <button type="button" data-bs-toggle="modal" data-bs-target="#Delete2Modal"
                                                class="btn transparent-btn me-1" data-user-id="{{ $advertise->id }}"
                                                onclick="setDeleteId(this)"><i
                                                    class="fa-regular fa-trash-can delete-icon"></i></button>
                                            <button type="button" data-bs-toggle="modal" data-bs-target="#Hide3Modal"
                                                class="btn transparent-btn"data-user-id="{{ $advertise->id }}"
                                                onclick="setHideId(this)">
                                                @if ($advertise->is_active == 0)
                                                    <i class="fa-regular fa-eye-slash eye-icon"></i>
                                                @else
                                                    <i class="fa-regular fa-eye eye-icon"></i>
                                                @endif
                                                </i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!--Hide Modal  Starts-->
        <div class="modal fade zoom-in" id="Hide3Modal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="p-3">
                                    <div class="text-center">
                                        <img class="mb-3" src="{{ asset('/assets') }}/images/icons/hide.svg">
                                        <p class="my-4 are-you-sure"></p>
                                        <p class="text-muted my-2 are-you-sure-subtext">Are you sure want to hide/unhide
                                            Status?</p>
                                    </div>
                                    <form action="{{ route('hide_advertisement') }}" method="POST"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" id="hide_id" name="hide_id">
                                        <div class="d-flex align-items-center mt-5 mb-3">
                                            <button type="button" class="btn btn-light cancel-btn me-3"
                                                data-bs-dismiss="modal">Cancel</button>
                                            <button type="submit" class="btn btn-primary yes-btn">
                                                <i class="fa-regular fa-circle-check me-2"></i>Yes,
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Hide Modal Ends-->
        <!--Delete Modal  Starts-->
        <div class="modal fade zoom-in" id="Delete2Modal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="p-3">
                                    <div class="text-center">
                                        <img class="mb-3" src="{{ asset('/assets') }}/images/icons/delete-icon.svg">
                                        <p class="my-4 are-you-sure"></p>
                                        <p class="text-muted my-2 are-you-sure-subtext">Are you sure want to Delete this?
                                        </p>
                                    </div>
                                    <form action="{{ route('deleteadvertisement') }}" method="POST"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" id="delete_id" name="delete_id">
                                        <div class="d-flex align-items-center mt-5 mb-3">
                                            <button type="button" class="btn btn-light cancel-btn me-3"
                                                data-bs-dismiss="modal">Cancel</button>
                                            <button type="submit" class="btn btn-primary yes-btn">
                                                <i class="fa-regular fa-circle-check me-2"></i>Yes, Delete
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Delete Modal Ends-->
    </div>
    <!-- end container fluid -->
    <script>
        function setHideId(button) {
            var hideId = button.getAttribute('data-user-id');
            document.getElementById('hide_id').value = hideId;
        }
    </script>
    <script>
        function setDeleteId(button) {
            var deleteId = button.getAttribute('data-user-id');
            document.getElementById('delete_id').value = deleteId;
        }
    </script>
    {{-- 
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const uploadWrapper = document.getElementById('ad-upload-wrapper');
      const uploadInput = document.getElementById('upload-ad-img');
      const adImageView = document.getElementById('ad-img-view');
      const uploadConditions = document.getElementById('ad-upload-conditions');
      // Clicking anywhere within the wrapper triggers file upload
      document.getElementById('ad-upload-wrapper').addEventListener('click', function() {
        uploadInput.click();
      });
      uploadInput.addEventListener('change', function() {
        const file = this.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = function() {
            adImageView.src = reader.result;
            uploadConditions.classList.add('d-none');
            uploadWrapper.style.padding = '0';
          }
          reader.readAsDataURL(file);
        }
      });
    });
  </script> --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const uploadWrapper = document.getElementById('ad-upload-wrapper');
            const uploadInput = document.getElementById('upload-ad-img');
            const adImageView = document.getElementById('ad-img-view');
            const uploadConditions = document.getElementById('ad-upload-conditions');
            document.getElementById('ad-upload-wrapper').addEventListener('click', function() {
                uploadInput.click();
            });
            uploadInput.addEventListener('change', function() {
                const file = this.files[0];
                if (file && file.type === 'image/jpeg' && file.size <= 5 * 1024 * 1024) {
                    const reader = new FileReader();
                    reader.onload = function() {
                        adImageView.src = reader.result;
                        uploadConditions.classList.add('d-none');
                        uploadWrapper.style.padding = '0';
                        adImageView.style.display = 'block';
                    }
                    reader.readAsDataURL(file);
                } else {
                    alert('Please upload a JPG image with a maximum size of 5MB.');
                    uploadInput.value = '';
                    adImageView.src = '';
                    adImageView.style.display = 'none';
                    uploadConditions.classList.remove('d-none');
                    uploadWrapper.style.padding = '';
                }
            });
        });
    </script>
    <script>
        const getDistrictsURL = "{{ url('/get-districts') }}";
        const getTaluksURL = "{{ url('/get-taluks') }}";
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const stateDropdown = document.getElementById('state_id');
            const districtDropdown = document.getElementById('district_id');
            const talukDropdown = document.getElementById('taluk_id');
            stateDropdown.addEventListener('change', function() {
                const stateId = this.value;
                districtDropdown.innerHTML = '<option value="">-- Select District --</option>';
                talukDropdown.innerHTML = '<option value="">-- Select Taluk --</option>';
                if (stateId) {
                    fetch(`${getDistrictsURL}?state_id=${stateId}`)
                        .then(response => response.json())
                        .then(data => {
                            data.forEach(district => {
                                const option = document.createElement('option');
                                option.value = district.id;
                                option.textContent = district.district_name;
                                districtDropdown.appendChild(option);
                            });
                        });
                }
            });
            districtDropdown.addEventListener('change', function() {
                const districtId = this.value;
                talukDropdown.innerHTML = '<option value="">-- Select Taluk --</option>';
                if (districtId) {
                    fetch(`${getTaluksURL}?district_id=${districtId}`)
                        .then(response => response.json())
                        .then(data => {
                            data.forEach(taluk => {
                                const option = document.createElement('option');
                                option.value = taluk.id;
                                option.textContent = taluk.taluk_name;
                                talukDropdown.appendChild(option);
                            });
                        });
                }
            });
        });
    </script>
    {{-- 
<script>
  document.addEventListener('DOMContentLoaded', function () {
      const stateDropdown = document.getElementById('state_id');
      alert('hi');
      const districtDropdown = document.getElementById('district_id');
      alert('hi');
      const talukDropdown = document.getElementById('taluk_id');
      stateDropdown.addEventListener('change', function () {
          const stateId = this.value;
          districtDropdown.innerHTML = '<option value="">-- Select District --</option>';
          talukDropdown.innerHTML = '<option value="">-- Select Taluk --</option>';
          if (stateId) {
              fetch(`/get-districts?state_id=${stateId}`)
                  .then(response => response.json())
                  .then(data => {
                      data.forEach(district => {
                          const option = document.createElement('option');
                          option.value = district.id;
                          option.textContent = district.district_name;
                          districtDropdown.appendChild(option);
                      });
                  });
          }
      });
      districtDropdown.addEventListener('change', function () {
          const districtId = this.value;
          talukDropdown.innerHTML = '<option value="">-- Select Taluk --</option>';
          if (districtId) {
              fetch(`/get-taluks?district_id=${districtId}`)
                  .then(response => response.json())
                  .then(data => {
                      data.forEach(taluk => {
                          const option = document.createElement('option');
                          option.value = taluk.id;
                          option.textContent = taluk.taluk_name;
                          talukDropdown.appendChild(option);
                      });
                  });
          }
      });
  });
</script> --}}
@endsection
@section('footer')
    <!-- JQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- Datatable JS -->
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/datatables.init.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.responsive.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.html5.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.print.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jszip.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/pdfmake.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/vfs_fonts.js"></script>
@endsection