@extends('master.back')
@section('styles')
    <link rel="stylesheet" href="{{asset('assets/back/css/select2.css')}}">
    <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">

<!-- Bootstrap Datetimepicker CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>

<!-- Moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<!-- Bootstrap Datetimepicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

@endsection
@section('content')
{{-- <script src="{{asset('assets/back/js/select2.js')}}"></script>
<link href="{{asset('assets/back/css/select2.css')}}" rel="stylesheet" /> --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<div class="">

    <!-- Page Heading -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="d-sm-flex align-items-center justify-content-between">
                <h3 class="mb-0 bc-title"><b>{{ __('Edit Promotion') }}</b> </h3>
                <a class="btn btn-primary btn-sm" href="{{route('back.promotion.index')}}"><i class="fas fa-chevron-left"></i> {{ __('Back') }}</a>
            </div>
        </div>
    </div>

    <!-- Form -->
    <div class="row">
        <div class="col-lg-12">
            @include('alerts.alerts')
        </div>
    </div>
    <!-- Nested Row within Card Body -->
    <form  action="{{ route('back.promotion.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <input type='hidden' name='id_promotion' value="{{$promotion->id}}" />
        {{-- <div class="row">
            <div class="col-lg-12"> --}}
                <div class="card">
                    <div class="card-body"> 
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name">{{ __('รายละเอียด') }} *</label>
                                    <input type="text"  required name="Detail" class="form-control item-name"   value="{{$promotion->detail}}">
                                    {{-- <input type="hidden" name="type_" value="{{@$type_}}"> --}}
                                </div>
 
                            </div>
              

                         
                        </div>


                        <div class="row">
                         

                            <div class="col-md-4">
                         
                                

                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="name">{{ __('รายละเอียดโปรโมชัน') }} *</label>
                                            <input type="hidden" value="{{$promotion->type}}">
                                            <select class="form-control" name="type" disabled>
                                                
                                                <option value="brand" {{ $promotion->type == 'brand' ? 'selected' : '' }}>ลดทั้งแบรนด์</option>
                                                <option value="items" {{ $promotion->type == 'items' ? 'selected' : '' }}>ลดเฉพาะสินค้า</option>
                                            </select>
                                           
                                        </div>
                                        <div class="col-md-6">
                                            <label for="name">{{ __('ประเภท') }} *</label>
                                            <select class="form-control" name="type_price" required>
                                                <option value="">โปรดเลือกประเภท</option>
                                                <option value="bath" {{ $promotion->type_price == 'bath' ? 'selected' : '' }}>ลดเป็นบาท</option>
                                                <option value="percen" {{ $promotion->type_price == 'percen' ? 'selected' : '' }}>ลดเป็น %</option>
                                            </select>
                                        </div>
                                     
                                    </div>

                                 
                                    
                                </div>

                                <div class="form-group">
                                    <div class="row">
                                   
                                        <div class="col-md-6">
                                            <label for="name">{{ __('วันที่เปิด') }} *</label>
                                            <input type="text" required class="form-control datetimepicker" name="start_date" value="{{$promotion->start_date}}" placeholder="{{ __('Enter Date Time') }}" >
                                           
                                        </div>
                                        <div class="col-md-6">
                                            <label for="name">{{ __('วันที่ปิด') }} *</label>
                                            <input type="text" required class="form-control datetimepicker" name="end_date" value="{{$promotion->end_date}}" placeholder="{{ __('Enter Date Time') }}"  >
                                        </div>


                                        
                                    </div>
                                
                                </div>

                                

                                <div class="form-group">
                                    <div class="row">

                                        <div class="col-md-6">
                                            <label for="name">{{ __('ยอดส่วนลด') }} *</label>
                                            <input type="number"  required name="price" class="form-control"  value="{{ $promotion->price }}">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="name">{{ __('สถานะ') }} *</label>
                                                <select class="form-control" name="status" required>
                                                    <option value="1" {{ $promotion->status == '1' ? 'selected' : '' }}>เปิด</option>
                                                    <option value="0" {{ $promotion->status == '0' ? 'selected' : '' }}>ปิด</option>
                                                    
                                                </select>
                                            </div>
                                    </div>
                                
                                </div>


                           

                         

                                <div class="row">
                                    <div class="col-md-12"> 
                                <div class="form-group">
                                    <div >
                                        <button type="บันทึก" class="btn btn-primary">{{ __('บันทึกรายละเอียด ') }}</button>
                                    </div>
                                </div>
                                    </div>
                                </div>
                                
                            </div>
                            <div class="col-md-8">
                                <div class="form-group">
                                    <label class="d-block">{{ __('รูปภาพ') }} *</label>
                                    <div class="form-group pb-0 pt-0 mt-0 mb-0">
                                        <img class="admin-img lg" src="{{asset('assets/images/promotion1/'.$promotion->photo)}}" >
                                    </div>
                                    <div class="form-group position-relative ">
                                        <label class="file">
                                            <input type="file"  accept="image" class="upload-photo" name="photo"
                                                id="file"  aria-label="File browser example">
                                            <span
                                                class="file-custom text-left">{{ __('Upload Image...') }}</span>
                                        </label>
                                        <br>
                                        <span class="mt-1 text-info">{{ __('Image Size Should Be 000 x 000. or square size') }}</span>
                                    </div>
                                    
                                </div>
                            </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="brand_id">{{ __('Select Brands') }} *</label>
                                <select name="brand_id" id="brand_id" data-href="{{ route('back.get.subcategory') }}" class="form-control basic">
                                    <option value="" selected>{{ __('Select One') }}</option>
                                    @foreach(DB::table('brands')->get() as $cat)
                                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    
                        <div class="col-md-4 mt-4">
                            <div class="form-group">
                                <button type="button" id="addDataBtn" class="btn btn-success">{{ __('+ เพิ่ม') }}</button>
                                <button type="button" class="btn btn-primary" id="saveDataBtn">{{ __('บันทึก Brands ที่รวมรายการ') }}</button>
                            </div>
                        </div>
                    
                        <div class="col-md-6 mt-4">
                            <div class="mt-4">
                                <table id="dataTable" class="table">
                                    <thead>
                                        <tr>
                                            <th>Brands</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- Data will be dynamically added here -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
              
             
                </div>
                

    
    </form>
</div>
<style>
    #number_form {
        width: 80px;
    }
</style>
{{-- <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> --}}
   <!-- CSS สำหรับ jQuery UI -->
   <script type="text/javascript">
    $(document).ready(function () {
        $('.datetimepicker').datetimepicker({
            format: 'DD/MM/YYYY HH:mm', // กำหนดรูปแบบวันที่และเวลา
            sideBySide: true,  // แสดงตัวเลือกวันและเวลาคู่กัน
            showClose: true,   // แสดงปุ่มปิด
            showClear: true,   // แสดงปุ่มล้างค่า
            showTodayButton: true, // แสดงปุ่มเลือกวันที่ปัจจุบัน
            icons: {
                time: 'fa fa-clock-o',
                date: 'fa fa-calendar',
                up: 'fa fa-chevron-up',
                down: 'fa fa-chevron-down',
                previous: 'fa fa-chevron-left',
                next: 'fa fa-chevron-right',
                today: 'fa fa-sun-o',
                clear: 'fa fa-trash',
                close: 'fa fa-times'
            }
        });
    });
</script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>

    <script type="" src="{{asset('assets/back/js/select2.js')}}"></script>
    <script>
        $('basic').select2({
			theme: "bootstrap"
		});
    </script>

    <script>
        $(document).ready(function () {
            // Initialize DataTable
            let table = $('#dataTable').DataTable();
        
            // Preload existing brands into DataTable
            @if(!empty($pro_detail))
                @foreach($pro_detail as $row)
                    table.row.add([
                        `<span data-id="{{ $row['brand_id'] }}">{{ $row['name'] }}</span>`,
                        `<button type="button" class="btn btn-danger btn-sm deleteRowBtn">{{ __('Delete') }}</button>`
                    ]).draw(false);
                @endforeach
            @endif
        
            // Add new data to DataTable
            $('#addDataBtn').on('click', function () {
                let brandId = $('#brand_id').val();
                let brandText = $('#brand_id option:selected').text();
        
                // Validate selected brand
                if (brandId === "") {
                    alert('{{ __("Please select a brand before adding.") }}');
                    return;
                }
        
                // Check for duplicates
                let isDuplicate = false;
                table.rows().every(function () {
                    let rowData = this.data();
                    let existingBrandText = $(rowData[0]).text();
                    if (existingBrandText === brandText) {
                        isDuplicate = true;
                        return false;
                    }
                });
        
                if (isDuplicate) {
                    alert('{{ __("This brand is already added.") }}');
                    return;
                }
        
                // Add the new row
                table.row.add([
                    `<span data-id="${brandId}">${brandText}</span>`,
                    `<button type="button" class="btn btn-danger btn-sm deleteRowBtn">{{ __('Delete') }}</button>`
                ]).draw(false);
            });
        
            // Delete a row from DataTable
            $('#dataTable tbody').on('click', '.deleteRowBtn', function () {
                table.row($(this).parents('tr')).remove().draw();
            });
        
            // Save data to database
            $('#saveDataBtn').on('click', function () {
                if (table.rows().count() === 0) {
                    alert('{{ __("No data to save. Please add data before saving.") }}');
                    return;
                }
        
                let data = [];
                table.rows().every(function () {
                    let rowNode = this.node();
                    data.push({
                        brand_id: $(rowNode).find('span').data('id')
                    });
                });
        
                $.ajax({
                    url: "{{ route('back.promotion.saveTableData') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        tableData: JSON.stringify(data),
                        'promotion_id':{{$promotion->id}}
                    },
                    success: function () {
                        alert('{{ __("Data saved successfully.") }}');
                        table.clear().draw();
                        loadTableData({{$promotion->id}}); // Reload data if needed
                    },
                    error: function () {
                        alert('{{ __("There was an error saving the data.") }}');
                    }
                });
            });
        
            // Load data into DataTable
            function loadTableData(promotionId) {
                $.ajax({
                    url: "{{ route('back.promotion.getPromotionData') }}",
                    type: "GET",
                    data: { promotion_id: promotionId },
                    success: function (data) {
                        table.clear().draw();
                        data.forEach(function (row) { 
                            table.row.add([
                                `<span data-id="${row.brand_id}">${row.name}</span>`,
                                `<button type="button" class="btn btn-danger btn-sm deleteRowBtn">{{ __('Delete') }}</button>`
                            ]).draw(false);
                        });
                    },
                    error: function () {
                        alert('{{ __("There was an error loading the data.") }}');
                    }
                });
            }
        });
        </script>
        
@endsection