@extends('adminlte::page')

@section('content')

<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>India Clubs</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{route('admin.home')}}">Home</a></li>
                    <li class="breadcrumb-item">CMS Settings</li>
                    <li class="breadcrumb-item active">Affiliated Clubs</li>
                    <li class="breadcrumb-item active">India Clubs</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">


                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">List Of Clubs</h3>
                    </div>
                    <div class="filter-group pl-4 pt-4">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-add">
                            Add Clubs
                        </button>
                    </div>


                    <div class="card-body table-responsive">
                        <p class="text-right font-bold mb-2 total_clients">Total No. of Clubs: 0</p>
                        <table id="example" class="table table-bordered table-striped ">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Clubs Name</th>
                                    <th>City</th>
                                    <th>Address</th>
                                    <th>Phone</th>
                                    <th>Fax</th>
                                    <th>Email</th>
                                    <th>Website Link</th>
                                    <th>Accommodation</th>
                                    <th data-orderable="false">Updated At</th>
                                    <th data-orderable="false">Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($affiliation))
                                @foreach($affiliation as $all)
                                <tr>
                                    <td>{{$all['id']}}</td>
                                    <td>{{$all['club_name']}}</td>
                                    <td>{{$all['city']}}</td>
                                    <td>{!!$all['address']!!}</td>
                                    <td>{{$all['phone']}}</td>
                                    <td>{{$all['fax']}}</td>
                                    <td>{{$all['email']}}</td>
                                    <td>{{$all['website_link']}}</td>
                                    <td>
                                        @if($all['has_accommodation'] == 'no')
                                        <p>No</p>
                                        @else
                                        <p>Yes</p>
                                        @endif
                                    </td>
                                    <td>{{ \Carbon\Carbon::parse($all['updated_at'])->format('d/m/Y') }}</td>
                                    @if ($all['status'] == 1)
                                    <td class="project-state">
                                        <span class="badge badge-success">Active</span>
                                    </td>
                                    @else
                                    <td class="project-state">
                                        <span class="badge badge-danger">Inactive</span>
                                    </td>
                                    @endif
                                    <td class="text-center py-0 align-middle">
                                        <div class="btn-group btn-group-sm">
                                            <a href="javascript:void(0);" class="edit_india_club" data-id="{{ $all['id'] }}" data-accommodation="{{ $all['has_accommodation'] }}" data-name="{{ $all['club_name'] }}" data-city="{{ $all['city'] }}" data-state="{{ $all['state'] }}" data-address="{{ $all['address'] }}" data-phone="{{ $all['phone'] }}" data-fax="{{ $all['fax'] }}" data-email="{{ $all['email'] }}" data-website_link="{{ $all['website_link'] }}" data-toggle="modal" data-target="#modal-edit"><i class="fas fa-edit"></i></a>&nbsp;&nbsp;

                                            <a href="javascript:void(0)" class="status_change_india_club" data-id="{{ base64_encode($all['id']) }}"><i class="fas fa-exchange-alt"></i></a>&nbsp;&nbsp;

                                            <a href="javascript:void(0)" class="delete_india_club" data-id="{{ base64_encode($all['id']) }}" style="color:red;"><i class="fas fa-trash"></i></a>&nbsp;&nbsp;
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                                @endif

                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>ID</th>
                                    <th>Clubs Name</th>
                                    <th>City</th>
                                    <th>Address</th>
                                    <th>Phone</th>
                                    <th>Fax</th>
                                    <th>Email</th>
                                    <th>Website Link</th>
                                    <th>Accommodation</th>
                                    <th data-orderable="false">Updated At</th>
                                    <th data-orderable="false">Status</th>
                                    <th>Actions</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->

    <div class="modal fade" id="modal-add">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h4 class="modal-title">Add Affiliated India Clubs</h4>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="add_india_club_info_frm" action="{{route('admin.saveIndiaClubs')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <!-- Club Name -->
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="club_name">Club Name <span class="text-danger">*</span></label>
                                    <input type="text" name="club_name" id="club_name" placeholder="Enter Club Name" class="form-control">
                                    <small id="club_nameErr" class="text-danger"></small>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="city">City <span class="text-danger">*</span></label>
                                    <input type="text" name="city" id="city" placeholder="Enter City" class="form-control">
                                    <small id="cityErr" class="text-danger"></small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <!-- Address -->
                            <div class="col-md-12 mb-3">
                                <div class="form-group">
                                    <label for="address">Address <span class="text-danger">*</span></label>
                                    <textarea name="address" id="address" placeholder="Enter Address" class="form-control summernote"></textarea>
                                    <small id="addressErr" class="text-danger"></small>
                                </div>
                            </div>
                            
                        </div>

                        <div class="row">
                            <!-- Phone -->
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="phone">Phone No.<span class="text-danger">*</span></label>
                                    <input type="text" name="phone" id="phone" placeholder="Enter Phone No." class="form-control">
                                    <small id="phoneErr" class="text-danger"></small>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="fax">Fax No.</label>
                                    <input type="text" name="fax" id="fax" placeholder="Enter Fax No." class="form-control">
                                    <small id="faxErr" class="text-danger"></small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <!-- Club Name -->
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="email">Email <span class="text-danger">*</span></label>
                                    <input type="text" name="email" id="email" placeholder="Enter Email" class="form-control">
                                    <small id="emailErr" class="text-danger"></small>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="website_link">Website Link </label>
                                    <input type="text" name="website_link" id="website_link" placeholder="Enter Website Link" class="form-control">
                                    <small id="website_linkErr" class="text-danger"></small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">

                            <!-- Accommodation -->
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="accommodation">Accommodation <span class="text-danger">*</span></label>
                                    <select type="text" name="accommodation" id="accommodation" placeholder="Enter Accommodation Details" class="form-control">
                                        <option value="">Select</option>
                                        <option value="yes">Yes</option>
                                        <option value="no">No</option>
                                    </select>
                                    <small id="accommodationErr" class="text-danger"></small>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="indianState">Select State / UT</label>
                                    <select id="indianState" name="state" class="form-control" required>
                                    <option value="">-- Select State / UT --</option>

                                    <!-- States -->
                                    <option value="Andhra Pradesh">Andhra Pradesh</option>
                                    <option value="Arunachal Pradesh">Arunachal Pradesh</option>
                                    <option value="Assam">Assam</option>
                                    <option value="Bihar">Bihar</option>
                                    <option value="Chhattisgarh">Chhattisgarh</option>
                                    <option value="Goa">Goa</option>
                                    <option value="Gujarat">Gujarat</option>
                                    <option value="Haryana">Haryana</option>
                                    <option value="Himachal Pradesh">Himachal Pradesh</option>
                                    <option value="Jharkhand">Jharkhand</option>
                                    <option value="Karnataka">Karnataka</option>
                                    <option value="Kerala">Kerala</option>
                                    <option value="Madhya Pradesh">Madhya Pradesh</option>
                                    <option value="Maharashtra">Maharashtra</option>
                                    <option value="Manipur">Manipur</option>
                                    <option value="Meghalaya">Meghalaya</option>
                                    <option value="Mizoram">Mizoram</option>
                                    <option value="Nagaland">Nagaland</option>
                                    <option value="Odisha">Odisha</option>
                                    <option value="Punjab">Punjab</option>
                                    <option value="Rajasthan">Rajasthan</option>
                                    <option value="Sikkim">Sikkim</option>
                                    <option value="Tamil Nadu">Tamil Nadu</option>
                                    <option value="Telangana">Telangana</option>
                                    <option value="Tripura">Tripura</option>
                                    <option value="Uttar Pradesh">Uttar Pradesh</option>
                                    <option value="Uttarakhand">Uttarakhand</option>
                                    <option value="West Bengal">West Bengal</option>

                                    <!-- Union Territories -->
                                    <option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
                                    <option value="Chandigarh">Chandigarh</option>
                                    <option value="Dadra and Nagar Haveli and Daman and Diu">
                                        Dadra and Nagar Haveli and Daman and Diu
                                    </option>
                                    <option value="Delhi">Delhi</option>
                                    <option value="Jammu and Kashmir">Jammu and Kashmir</option>
                                    <option value="Ladakh">Ladakh</option>
                                    <option value="Lakshadweep">Lakshadweep</option>
                                    <option value="Puducherry">Puducherry</option>
                                    </select>
                                    <small id="stateErr" class="text-danger"></small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" id="submit" class="btn btn-primary"><span>Save</span></button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal add-->

    <div class="modal fade" id="modal-edit">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Affiliated India Clubs</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="edit_india_club_info_frm" action="{{route('admin.updateIndiaClubs')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="hid" id="hid">
                        <div class="row">
                            <!-- Club Name -->
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="club_name">Club Name <span class="text-danger">*</span></label>
                                    <input type="text" name="club_name" id="club_name_edit" placeholder="Enter Club Name" class="form-control">
                                    <small id="club_nameEditErr" class="text-danger"></small>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="city">City <span class="text-danger">*</span></label>
                                    <input type="text" name="city" id="city_edit" placeholder="Enter City" class="form-control">
                                    <small id="cityEditErr" class="text-danger"></small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <!-- Address -->
                            <div class="col-md-12 mb-3">
                                <div class="form-group">
                                    <label for="address">Address <span class="text-danger">*</span></label>
                                    <textarea name="address" id="address_edit" placeholder="Enter Address" class="form-control summernote"></textarea>
                                    <small id="addressEditErr" class="text-danger"></small>
                                </div>
                            </div>
                            
                        </div>

                        <div class="row">
                            <!-- Phone -->
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="phone">Phone No.<span class="text-danger">*</span></label>
                                    <input type="text" name="phone" id="phone_edit" placeholder="Enter Phone No." class="form-control">
                                    <small id="phoneEditErr" class="text-danger"></small>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="fax">Fax No.</label>
                                    <input type="text" name="fax" id="fax_edit" placeholder="Enter Fax No." class="form-control">
                                    <small id="faxEditErr" class="text-danger"></small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <!-- Club Name -->
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="email">Email <span class="text-danger">*</span></label>
                                    <input type="text" name="email" id="email_edit" placeholder="Enter Email" class="form-control">
                                    <small id="emailEditErr" class="text-danger"></small>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="website_link">Website Link </label>
                                    <input type="text" name="website_link" id="website_link_edit" placeholder="Enter Website Link" class="form-control">
                                    <small id="website_linkEditErr" class="text-danger"></small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">

                            <!-- Accommodation -->
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="accommodation">Accommodation <span class="text-danger">*</span></label>
                                    <select type="text" name="accommodation" id="accommodation_edit" placeholder="Enter Accommodation Details" class="form-control">
                                        <option value="">Select</option>
                                        <option value="yes">Yes</option>
                                        <option value="no">No</option>
                                    </select>
                                    <small id="accommodationEditErr" class="text-danger"></small>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="indianState">Select State / UT</label>
                                    <select id="indianStateEdit" name="state" class="form-control" required>
                                    <option value="">-- Select State / UT --</option>

                                    <!-- States -->
                                    <option value="Andhra Pradesh">Andhra Pradesh</option>
                                    <option value="Arunachal Pradesh">Arunachal Pradesh</option>
                                    <option value="Assam">Assam</option>
                                    <option value="Bihar">Bihar</option>
                                    <option value="Chhattisgarh">Chhattisgarh</option>
                                    <option value="Goa">Goa</option>
                                    <option value="Gujarat">Gujarat</option>
                                    <option value="Haryana">Haryana</option>
                                    <option value="Himachal Pradesh">Himachal Pradesh</option>
                                    <option value="Jharkhand">Jharkhand</option>
                                    <option value="Karnataka">Karnataka</option>
                                    <option value="Kerala">Kerala</option>
                                    <option value="Madhya Pradesh">Madhya Pradesh</option>
                                    <option value="Maharashtra">Maharashtra</option>
                                    <option value="Manipur">Manipur</option>
                                    <option value="Meghalaya">Meghalaya</option>
                                    <option value="Mizoram">Mizoram</option>
                                    <option value="Nagaland">Nagaland</option>
                                    <option value="Odisha">Odisha</option>
                                    <option value="Punjab">Punjab</option>
                                    <option value="Rajasthan">Rajasthan</option>
                                    <option value="Sikkim">Sikkim</option>
                                    <option value="Tamil Nadu">Tamil Nadu</option>
                                    <option value="Telangana">Telangana</option>
                                    <option value="Tripura">Tripura</option>
                                    <option value="Uttar Pradesh">Uttar Pradesh</option>
                                    <option value="Uttarakhand">Uttarakhand</option>
                                    <option value="West Bengal">West Bengal</option>

                                    <!-- Union Territories -->
                                    <option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
                                    <option value="Chandigarh">Chandigarh</option>
                                    <option value="Dadra and Nagar Haveli and Daman and Diu">
                                        Dadra and Nagar Haveli and Daman and Diu
                                    </option>
                                    <option value="Delhi">Delhi</option>
                                    <option value="Jammu and Kashmir">Jammu and Kashmir</option>
                                    <option value="Ladakh">Ladakh</option>
                                    <option value="Lakshadweep">Lakshadweep</option>
                                    <option value="Puducherry">Puducherry</option>
                                    </select>
                                    <small id="stateErr" class="text-danger"></small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" id="submit" class="btn btn-primary"><span>Update</span></button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal edit-->


    <!-- <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="min-width: 700px;">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <img src="" class="imagepreview" style="width: 100%;">
                </div>
            </div>
        </div>
    </div> -->

</section>
<!-- /.content -->
@stop

@section('js')
@include('admin.affiliated-clubs.scripts.index')
<script>
    $(document).ready(function() {
        setTimeout(function() {
            $('.summernote').summernote('destroy');
            $('.summernote').summernote(summernoteConfig);
        }, 500);
        $('#example').DataTable();
    });
</script>
@stop